Inconsistent animation behavior on iPad/mobile

It appears that the animation code generated by Webflow does not behave correctly when loaded on an iPad (5th & 6th gen models, tested on Safari/Chrome/Firefox in privacy mode, no extensions).

When the page is loaded, some of the animated text simply never appears. What’s especially confusing is that the two blocks of header text with identical class and animation settings (class ‘main-h2’) behave differently – one loads correctly, and one never shows up. Additionally, the class ‘main-h1’ never appears. This behavior seems to be limited to mobile browsers, and appears fine on desktop. The attached screenshot below shows the empty space on the left, which should have text.

I’ve viewed this in Webflow Designer on both desktop and tablet preview modes, on the full range of page widths, and cannot replicate what’s happening on the published page. Thanks for any feedback!


The page in question is titled ‘The Goods’:

Here is my site Read-Only: Webflow - Bridger Helmets

Seems like there is a really weird thing going on with that typeface. Try changing the font as you can see in this video.

1 Like

Noah,

Greatly appreciate your taking the time to look at this. Your typeface suggestion does in fact work. Very odd in that the original font was showing up fine for me in preview mode (in contrast to what you saw). I’m not sure I would have ever suspected this to be a font issue. Thanks very much.

1 Like

Definitely not a problem! Happy I could help! And yeah, that’s a rare thing. I mean I always try and use typefaces that have a really good support and fonts that are from a good known source like typekit or other popular font designers. I guess the odd thing is as you mentioned, the fact that you were not able to see that in your designer. Strange. Either wayI wish you best! Let me know if you have any other questions. :webflow_heart:

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.