Я использую Lottie Web - плагин js для анимации пути SVG. Все работает отлично, кроме Safari, где SVG мерцает вверх и вниз, как показано на скриншоте ниже:
![Image of Yaktocat](https://i.imgur.com/peZHoHB.gif)
Я заметил, что проблема возникает, когда я перемещаю мышь рядом с 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