SVG上的CSS過渡導致閃爍的IE11和Edge

Question

我在標題中放置了SVG圖片。 圖片具有固定的寬度，當我向下滾動時，我在標題中添加了CSS類以更改圖片的寬度。 除了在IE11和Edge中閃爍外，在Chrome中也可以正常工作，一切正常。

img {
  transition: width 5s ease; 
}

任何想法如何解決這個問題？

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

Answer 1

不用轉換寬度，而是使用CSS Transform 。 使用transform: scale(0.5); 以及過渡目標轉換，您將獲得所需的內容，而無需重繪，並且動畫效果更加流暢。

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

Answer 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/

Answer 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>

Answer 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;

SVG上的CSS過渡導致閃爍的IE11和Edge

問題描述

4 個解決方案

解決方案1
2 已采納 2018-12-04 15:23:58

解決方案2
1 2019-05-29 14:12:59

解決方案3
0 2019-05-02 08:39:06

解決方案4
-1 2018-12-04 14:48:50

SVG上的CSS過渡導致閃爍的IE11和Edge

問題描述

4 個解決方案

解決方案1 2 已采納 2018-12-04 15:23:58

解決方案2 1 2019-05-29 14:12:59

解決方案3 0 2019-05-02 08:39:06

解決方案4 -1 2018-12-04 14:48:50

解決方案1
2 已采納 2018-12-04 15:23:58

解決方案2
1 2019-05-29 14:12:59

解決方案3
0 2019-05-02 08:39:06

解決方案4
-1 2018-12-04 14:48:50