Microsoft Edgeのホバーのバグ

Question

Microsoft Edgeにバグがあります。ホバリング中の<div>はtransform: scale(1.5);とtransition: transform 1s;を持っています。しかし、カーソルをdivに移動させて1秒間待ってからdivに移動すると、divの位取りが崩れてトランジションが消えます。この動作を修正する方法はありますか？ここにはfiddleがあります。

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
}

<div></div>

Answer 1

transition-timing-functionプロパティを使用してエッジにこの移行問題を解決するには、これは、開始と終了にそれが遅くなってスピードに影響を与えることによって、問題を修正します。あなたは慎重に気付いた場合は幅が上の変更とグリッチのいくつかの種類があります：あなたはその後、transition-duration

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
    transition-timing-function: ease-in-out; 
 
}

<div></div>

EDITで元の速度にそれを作るために（秒）アニメーションの長さを設定することができますホバーで全体的にスムーズです。