Мерцающая SVG анимация в Safari - PullRequest
0 голосов
/ 10 ноября 2018

Я использую Lottie Web - плагин js для анимации пути SVG. Все работает отлично, кроме Safari, где SVG мерцает вверх и вниз, как показано на скриншоте ниже:

Image of Yaktocat

Я заметил, что проблема возникает, когда я перемещаю мышь рядом с SVG или когда я изменяю размеры окон браузера на рабочем столе Safari, в то время как в мобильной среде я меняю страницу и возвращаюсь к индексу.

Я применил событие mousemove к тегу body. Я использую pjax для изменения страницы (swup.js). Я использую translate3d в CSS для анимации компонента при вводе на странице. В консоли chrome / safari не отображается ошибка. Я уже пытался удалить дальнейший сценарий или преобразования на svg, но проблема все еще там.

Я не могу понять, в чем может быть проблема. Пожалуйста, посетите andreabalbo.com в Safari, чтобы протестировать его. Оригинальный файл здесь файл лотереи .

Вот код:

function init_home() {

    //lottie home me at office
    if( $("#home-isometric").length != 0 ){

        let home_isometric_animation = lottie.loadAnimation({
            container: document.getElementById("home-isometric"),
            renderer: 'svg',
            loop: true,
            autoplay: false,
            path: '../assets/lottie-files/home-isometric.json'
        });
        home_isometric_animation.addEventListener('DOMLoaded', function(){
            home_isometric_animation.playSegments([[1,180],[180,1]], true);
        });

    }

}
init_home();
div#home-isometric{
    & > svg{
        margin-top:50px;
        max-height: 300px;
        transform: scale(1.5) !important;
    }
    @media (min-width: 992px) {
        &::after{
            content:'Business Support Analyst, Cofondatore di Pellet del Sureste e professionista nel settore Informatica e servizi.';
            position: absolute;
            top: 50%;
            left: -300px;
            width: 500px;
            font-family: 'Courgette', cursive;
            text-align: justify;
            font-size: 1.6em;
            color: #393858;
        }
    }
}
<div id="home-isometric" class="col" data-velocity-slideleftin="600"></div>

Здесь есть еще один вопрос, который может быть полезен, не для меня, к сожалению, -> Мерцание SVG анимации пути в Safari

Большое спасибо, Andrea

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...