Safari上闪烁的SVG动画

时间:2018-11-10 15:37:09

标签: javascript jquery html css3 svg

我正在使用Lottie Web - js plugin为SVG路径设置动画。除了在Safari中SVG上下闪烁的Safari之外,其他所有功能都可以正常运行,如以下屏幕截图所示:

Image of Yaktocat

我注意到,当我将鼠标移到SVG附近或在Safari桌面上调整浏览器窗口的大小时,而在移动环境中,当我更改页面并返回索引时,就会发生此问题。

我在body标签上应用了mousemove事件。我正在使用pjax来更改页面(swup.js)。在页面中输入内容时,我正在使用CSS中的translate3d来对组件进行动画处理。 chrome / safari控制台中未显示任何错误。我已经尝试删除svg上的其他脚本或转换,但是问题仍然存在。

我不明白可能是什么问题。请在Safari上访问andreabalbo.com进行测试。原始文件在这里lottie file

下面是一些代码:

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 path animation flicker on Safari

非常感谢, 安德里亚

0 个答案:

没有答案