2017-04-26 12 views
0

나는 이미지가있는 마스크가있는 svg를 가지고 있는데, 이미지는 애니메이션 GIF입니다. TweenlineLite를 사용하여 화면을 가로 질러 이동합니다. 사파리를 제외한 모든 브라우저에서 정상적으로 작동합니다. 사파리에서는 스크린 전체에서 움직이지만 애니메이션 GIF는 작동하지 않습니다! 그러나 내가 화면에있을 svg의 초기 위치를 변경하면 gif가 움직입니다.grepock을 사용하여 Safari에서 svg의 애니메이션을 적용하지 않습니다.

이 사파리 버그는 무엇입니까? 여기에 내가이 문제/버그를 해결 한 방법을 발견 코드 codepen

var raven = document.getElementById("js-raven"), 
width = $(window).width() + 200, 

tl = new TimelineLite({ 
    delay: 2, 
    onComplete: function() { 
     this.restart(); 
    } 
}); 
tl 
.from(raven, 0, {x: -200}) 
.to(raven, 20, { x: width }) 
.to(raven, 0, { x: width, rotationY: 180, delay: 5 }) 
.to(raven, 40, { x: -width }); 
+0

이것은 웹킷 용 버그 추적기입니다. 여러분은 그것을 검색하거나 버그를 제기 할 수 있습니다. https://bugs.webkit.org/query.cgi?format=specific&product=WebKit –

+0

감사합니다. @RobertLongson,이 버그 또는 내가 한 짓입니다. 나는 또한 img 태그로 이미지를 추가해도 괜찮 았지만 화면에 그래픽이 있어야하는 것 같습니다. – Adam

+0

@RobertLongson이 문제를 해결할 방법이 있습니까? – Adam

답변

0

의 codepen이다.

같은 애니메이션 GIF 파일로 태그를 설정하고 구성하는 크기 1 개 1

예를 들어,이 다음 화면을 애니메이션으로 여전히 재생 GIF를 할 수

<img src="resources/images/raven.gif" width="1" height="1">