CSS SVG 上的过渡导致 IE11 和 Edge 闪烁
CSS transition on SVG causes flickering IE11 and Edge
我在 header 中放置了一张 SVG 图片。该图像具有固定宽度,当我向下滚动时,我将 CSS class 添加到我的 header 以更改图像的宽度。它工作正常,除了它在 IE11 和 Edge 中闪烁,在 Chrome 中工作正常。
img {
transition: width 5s ease;
}
有什么解决办法吗?
将您的 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;
使用 CSS Transform 而不是过渡宽度。使用 transform: scale(0.5);
和过渡目标转换,您将获得所需的内容而无需重新绘制,并且您将获得更流畅的动画。
这是您更新后的 fiddle:https://jsfiddle.net/kyawjn4s/1/
另一种解决方案是将 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>
不要使用 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/
我在 header 中放置了一张 SVG 图片。该图像具有固定宽度,当我向下滚动时,我将 CSS class 添加到我的 header 以更改图像的宽度。它工作正常,除了它在 IE11 和 Edge 中闪烁,在 Chrome 中工作正常。
img {
transition: width 5s ease;
}
有什么解决办法吗?
将您的 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;
使用 CSS Transform 而不是过渡宽度。使用 transform: scale(0.5);
和过渡目标转换,您将获得所需的内容而无需重新绘制,并且您将获得更流畅的动画。
这是您更新后的 fiddle:https://jsfiddle.net/kyawjn4s/1/
另一种解决方案是将 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>
不要使用 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/