Streaming live at 10am (PST)

Glitchy display of animation on Android


#1

Hi, I have created a series of page load animations to simulate a slider (as placing the animations in the slider was causing display problems).

Generally it seems to be displaying well in preview, well on desktop but it is glitchy on mobile Android.

The animations use: scale, size, opacity, move, show/hide. Is it known that any of these animation styles are glitchy on Android?

https://preview.webflow.com/preview/john-sherwin-animation-test?preview=89cc01a61ecc2617b6f318a1395f0d5d

http://john-sherwin-animation-test.webflow.io/


#2

Figured this out, it was because some divs on desktop were wider than the viewport, changing the parent divs to overflow hidden seems to have stopped the glitchy display problems.


#3

Actually that helped but didn’t solve my problem. Ultimately after painstaking investigation I figured out that the webflow transformations need to call some webkit to iron out some glitchy displays with flickering on mobile and older browsers.

I add a class .csstransform to all elements that are animated using transforms (rotate, scale, size etc) to call the following code inserted in the Header in custom code in site settings:

.csstransform{ -webkit-transform-style: preserve-3d; -webkit-transform: scale(1); -webkit-transform:translate3d(0,0,0); }

This resolved the glitches and flickers I was seeing on mobile.

Phew!