search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.28k stars 2.87k forks source link

Bodymovin mask glitch occurs if parent DIV set to % #1473

Open PodClay opened 5 years ago

PodClay commented 5 years ago

Tell us about your environment Windows 7

What did you do? Please explain the steps you took before you encountered the problem. Included a Bodymovin animation in a Wordpress site.

What did you expect to happen? The masked areas to be completely clipped, no matter what the viewport size.

What actually happened? Please include as much relevant detail as possible. When I shrink the browser window to certain widths, occasionally a 1 pixel wide line will appear next to the masked area, on any of the four sides of the globe. See image supplied. This only happens if the containing DIV has certain CSS settings, for example, margin: 0 auto; width: 70%;. animation

Please provide a download link to the After Effects file that demonstrates the problem. Here is a link to a Codepen where the animation works flawlessly... https://codepen.io/clayrav/pen/exmZYx Here is a link to a Codepen where it glitches occasionally... https://codepen.io/clayrav/pen/Bvqrdy Here is a Dropbox link to the original Bodymovin demo HTML... https://www.dropbox.com/s/9tiivuuou3syytv/demo.html?dl=0

Thanks!

PodClay commented 5 years ago

Ok, I put the issue up on Stack Overflow and someone posted a fix. Removing the following line from the Javascript generated by Bodymovin fixed the issue... this.svgElement.style.transform="translate3d(0,0,0)" Perhaps in future versions of Bodymovin this line could be left out if no translations are necessary?