Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation breaks on Android with meta tag viewport

See original GitHub issue

Hi there, I’ building a site using lottie-web to animate aep animations exportend in JSON.

Everything works fine on iOS and desktop but on Android+Chrome (tablet and mobile) some parts of the animations are not visible.

We found out that removing this meta tag solved the issue:

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

but obviously the site was not well-scaled.

The animations are also scaled with css.

this is what I see on android https://drive.google.com/file/d/1gSWn65YnASOv9ivG4Bv22-bkTxka-CEg/view?usp=sharing

this is the expected behavior https://drive.google.com/open?id=1d6dpAlzATgbcfmcVYpj-4NQB2YmU5iHE

here is a link to the site: stage.oneupstud.io/wow10

and this is the aep file https://drive.google.com/open?id=1Q8x0C9l-9WijwIlhfCdfjDpIVqv3wMmk

thanks for any help

Issue Analytics

State:
Created 5 years ago
Comments:10

Top GitHub Comments

2reactions

natedizcommented, Oct 4, 2018

Has there been any update to this? Same thing is happening to me. I am using inverted alpha masks, which work fine on desktop, work on android without the meta tag, but break when in mobile mode. Switching to canvas renderer also messes up the masks in the animation.

0reactions

bodymovincommented, Feb 10, 2019

Hi @enricobuehler can you share a link with the issue?

Top Results From Across the Web

Logo animation: off viewport image issue on mobile and tablet

I'm trying to animate my logo making images coming from the sides to the center of ... <meta name="viewport" content="width=device-width">.

How do you disable viewport zooming on Mobile Safari?

Try adding the following to your head-tag: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, ...

Viewport meta tag - HTML: HyperText Markup Language | MDN

This article describes how to use the "viewport" tag to control the viewport's size and shape.

How to Use Viewport in CSS with Examples - eduCBA

CSS Viewport is defined as the visible area on a window screen which refers to the displays of the mobile devices. Adding CSS...

Responsive Web Design: What It Is And How To Use It

Images could easily break layouts, and even flexible structural ... <meta name="viewport" content="width=device-width; initial-scale=1.0">.