Lottie-web: Android Chrome render problem

[dutscher]

Hey there,

thanks for the great tool bodymovin and lottie. Its amazing to get our freaky animations to the web :D

But i figured out that the chrome on android is very wonky.

Here is my animation: https://www.lottiefiles.com/share/qupziE

It works on:

• Samsung GalaxyS7
• Samsung S5
• iPhone 6 / 7

I dont work:

• Samsung S4 active with Lineage
• Moto G5
• LG G6

On desktop everything is fine.

How i could find the failure?
Is it my animation?

cheers and thanks for the help!

[bodymovin]

Hi, I don't have those devices.
Could you share a screenshot of what's not working to see the difference?

[dutscher]

If you open the animation on desktop, everthing was fine.
https://www.lottiefiles.com/share/qupziE

on the named devices on android you only see the yellow stroke in 1 frame.
https://i.imgur.com/NTPhdZW.png

cheers

[bodymovin]

I guess you're using track matte alpha masks and inverted alpha masks.
Those type of masks might not be supported by older versions of chrome.
Can you check the Chrome version on the devices that don't work?

[dutscher]

on my android i've the newest 64.0.3282.123.
i will check the masks. is it working on your device? a friend on mine has the same version and it works on his phone... very strange issue.
thanks in advance!

[dutscher]

hey there, thanks for make a new release :)

BUT...
i figured out when i activate "request desktop site", i works like a charm,
and that mean the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
is the problem.

when i release my page without this meta tag i works on all devices. and with metatag it don't.
not important which value in the content attribute, alone the presence of the tag is damaged the animation. here is my page http://www.the-animator.com/

maybe this helps for find the bug.

cheers

[michal-rad]

+1

[dev-tukan]

Same on One Plus, it has to do with the viewport, because in desktop view it renders normally..