CSS родительского DIV мешает SVG-анимации - PullRequest
Новая
       32

CSS родительского DIV мешает SVG-анимации

0 голосов
/ 23 января 2019

Мы переместили SVG / JS-анимацию, созданную с помощью плагина Adobe After Effects Bodymovin, с одного сайта Wordpress на другой.На старом сайте (который я к сожалению не могу показать) анимация работает без нареканий.На новом сайте, в зависимости от размера окна браузера, анимация содержит глюки, которые, по-видимому, вызваны некоторой ошибкой округления в маске анимации.

На одном или нескольких краях земного шара выиногда (в зависимости от ширины области просмотра) можно увидеть бит шириной в один пиксель прокручиваемого фонового изображения.См. Изображение.

glitches near edge of animation

Я выделил анимацию в CodePen.Он отлично работает здесь , независимо от того, какой размер окна просмотра установлен.

Однако, когда я представлю этот небольшой кусочек CSS, такой как этот ... 

margin: 0 auto;
width: 70%;

... в стиле родительского DIV, сбой начинает происходить. См. Здесь .

В исходной анимации маска простирается намного дальше, чем края земного шара, поэтому я подозреваю, что маска теперь просто достигает краев земного шараэто какая-то оптимизация Bodymovin.

Учитывая, что этого не происходит на старом сайте, я подозреваю, что существует какой-то CSS или, возможно, параметр в Bodymovin, который не позволяет этому случиться.

Сайт Wordpress построен с Divi, и анимация находится в DIV, вложенном во многие другие DIV (т.е. модуль, сидящий в столбце, сидящий в ряду, сидящий в разделе), и у большинства этих DIV есть установленная ширинав различных процентах.Поэтому я не думаю, что решение будет заключаться в упрощении CSS.

Кто-нибудь сталкивался с такой проблемой раньше?Или есть предложения, которые могут помочь устранить его?

Я также создал Issue на странице Bodymovin GitHub, но время отклика там, кажется, сильно различается.

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Я провел некоторое тестирование на коде и смог заставить его работать после удаления 

transform: translate3d(0px, 0px, 0px);

, поэтому удаление этой строки скрипта должно решить проблему 

this.svgElement.style.transform="translate3d(0,0,0)")

Почему вы пытаетесь преобразовать svg, когда оно уже преобразуется автоматически.

Это возможное исправление, если вы все еще хотите сохранить настройки с полем и шириной%.

0 голосов
/ 23 января 2019

Вы можете избежать этой проблемы, задав ширину в пикселях равной #container отзывчивость в процентах иногда приводит к тому, что пиксели слегка отключаются. Используйте медиа-запросы, если вам нужны разные размеры для других размеров экрана. 

#container {
  margin: 0 auto;
  width: 400px;
}
...