Microsoft Edge Fix Error

Question

I have a bug in Microsoft Edge. <div> during hover has transform: scale(1.5); with transition: transform 1s; . But when you move the cursor to the div, wait 1 s, exit, and then quickly go into the div, the spread of the div scale and the transition disappear. Is there any way to fix this behavior? Here is the fiddle .

 div { background-color: green; transition: transform 1s; height: 100px; width: 100px; } div:hover { transform: scale(1.5); } 

 <div></div> 

Answer 1

To fix this problem of switching to Edge, use the transition-timing-function property, this will fix the problem by affecting the speed, making it slower at the beginning and end. Then you can set the length of the animation (in seconds) to make it the original speed using 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: If you carefully noticed some kind of crash with the width change on hover, but overall the transition is smooth to Edge