CSS переход на SVG вызывает мерцание IE11 и Edge - PullRequest
Новая
       21

CSS переход на SVG вызывает мерцание IE11 и Edge

0 голосов
/ 04 декабря 2018

У меня есть изображение SVG, помещенное в мой заголовок.Изображение имеет фиксированную ширину, и когда я прокручиваю вниз, я добавляю класс CSS в свой заголовок, чтобы изменить ширину изображения.Он отлично работает, кроме мерцания в IE11 и Edge, отлично работает в Chrome.

img {
  transition: width 5s ease; 
}

Есть идеи, как решить эту проблему?

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

Ответы [ 4 ]

0 голосов
/ 29 мая 2019

Вместо использования тега 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/

0 голосов
/ 04 декабря 2018

Вместо изменения ширины используйте CSS Transform .Используя transform: scale(0.5); и преобразование с целевым переходом, вы получите то, что ищете, без необходимости перерисовки, и получите намного более плавную анимацию.

Вот ваша обновленная скрипка: https://jsfiddle.net/kyawjn4s/1/

0 голосов
/ 02 мая 2019

Другое решение заключается в размещении 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>
0 голосов
/ 04 декабря 2018

Измените свой 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;
...