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?
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.
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!
Thanks for this. I am have some issues on Android as well. Could you expand on the solution a bit more for me to show exactly how you resolved. Appreciate it…beer on me