html - SVG 上的 CSS 转换导致 IE11 和 Edge 闪烁

Question

我的标题中放置了一个 SVG 图像。该图像具有固定宽度，当我向下滚动时，我将一个 CSS 类添加到我的标题以更改图像的宽度。它工作正常，除了它在 IE11 和 Edge 中闪烁，在 Chrome 中工作正常。

img {
  transition: width 5s ease; 
}

有什么解决办法吗？

fiddle : https://jsfiddle.net/xpvt214o/980754/

Answer 1

不用过渡宽度，而是使用 CSS Transform .使用 transform: scale(0.5); 和过渡目标转换，您将获得所需的内容而无需重新绘制，并且您将获得更流畅的动画。

这是您更新的 fiddle :https://jsfiddle.net/kyawjn4s/1/