SVG 上的 CSS 过渡导致闪烁 IE11 和 Edge答案

【问题标题】：CSS transition on SVG causes flickering IE11 and EdgeSVG 上的 CSS 过渡导致闪烁 IE11 和 Edge
【发布时间】：2019-05-06 00:18:38
【问题描述】：

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

img {
  transition: width 5s ease; 
}

有什么办法解决这个问题吗？

小提琴： https://jsfiddle.net/xpvt214o/980754/

【问题讨论】：

IE/Edge 再次来袭！好消息：这是 MS 已知的一个错误，基本上它异步加载 SVG，因此当您转换大小时，它每次都会重新渲染 SVG，但会丢失几帧（因此会闪烁）。坏消息：他们不会修复它，因为它是微软。 developer.microsoft.com/en-us/microsoft-edge/platform/issues/… 遗憾的是，除了不使用 SVG 之外，我没有看到解决方案。（其他相关的好消息：MS 可能会关闭 Edge，所以在 2 年内我们可能不必再为此烦恼）

标签： html css svg css-transitions

【解决方案1】：

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

这是你更新的小提琴：https://jsfiddle.net/kyawjn4s/1/

【讨论】：

嗨，杰克，工作顺利！现在的问题是我想把两张图片放在一起，没有比例造成的差距，你认为这可能吗？jsfiddle.net/xpvt214o/981785
不是真的，但你可以把它和translateX 结合起来，有点假。 jsfiddle.net/9knpvqro
CSS 转换只是视觉效果，如果有人可能会说，它们不符合流程并且不会影响块大小。正如 elveti 所说，唯一的选择是结合比例并翻译成并排放置。

【解决方案2】：

不要使用img 标签，试试object。它甚至为您提供了一个后备选项并解决了 IE/Edge 上的闪烁问题。它也应该适用于旧版浏览器。

示例

<object data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/adobe.svg" type="image/svg+xml" width="200">
    <!--Fallback image for older browsers -->
    <img src="http://placehold.it/250x200" />
</object>

我已经更新了你的 jsfiddle：https://jsfiddle.net/axdetm4h/

【讨论】：

【解决方案3】：

另一种解决方案是将 SVG 内联。它在 Edge 和 IE 11 中运行良好。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG inline</title>
<style>
svg{width:200px;transition:width .5s}
svg:hover{width:500px;}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="yellow" />
</svg>
</body>
</html>

【讨论】：

【解决方案4】：

将您的 CSS 更改为：

-webkit-transition: width 5s ease;
-moz-transition: width 5s ease;
-ms-transition: width 5s ease;
-o-transition: width 5s ease;
transition: width 5s ease;

【讨论】：