Microsoft Edge 悬停错误

Question

我在 Microsoft Edge 中遇到了一个错误。 <div> 在悬停期间有 transform: scale(1.5); 和 transition: transform 1s;。但是当你将光标移动到div时，等待1s，移出然后快速移动到div，div的比例被打破并且过渡消失。有什么办法可以解决此问题？这里是 fiddle.

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

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

<div></div>

Answer 1

要解决 Edge 上的这个过渡问题，请使用 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>

编辑：如果您仔细观察，悬停时宽度会发生变化，但总体而言，Edge 上的过渡是平滑的

Microsoft Edge 悬停错误

Microsoft Edge hover bug

html

css

transition

hover

microsoft-edge