I have a bug in Microsoft Edge. <div>
during hover has transform: scale(1.5);
with transition: transform 1s;
. But when you move cursor to div, wait 1s, move out and then fast move to div, div's scale is broken and transition disappear. Is there any way to fix this behavior? Here is fiddle .
div { background-color: green; transition: transform 1s; height: 100px; width: 100px; } div:hover { transform: scale(1.5); }
<div></div>
To fix this transition problem on Edge use the transition-timing-function
property, this will fix the problem by affecting the speeding making it slower on the start and the end. You can then set the animation length (in seconds) to make it to the original speed with 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 notice carefully there's some kind of a glitch with the width changing on hover, but overall the transition is smooth on Edge
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.