Animations do not work on Google Chrome in iOS

Design help Animations & Interactions
1

Hello -

I have an issue where no Animations are working on Google Chrome on iOS. The Chrome version is 76.0.3809.123 (the latest version).

I have a site built with a Webflow, with a Navbar object that has Animations for the dropdown turned on, and a slideshow with basic fade Animation between images. These are both OOTB without any custom code beside some classes created, and both are not animating on this specific browser.

All other browsers (Safari, Safari Mobile, FF, Chrome) are OK, but Mobile Chrome iOS is not working at all.

Has anyone seen this behavior or know any fixes?

Here is my public share link: http://samuel-amoia.webflow.io/

Preview link: Webflow - Samuel Amoia

1 Like
2

First of all, Hi! Idk if you remember me (Leslie) but we met a few years ago in Austin, I’m friends with Carleton, Charles, Will etc. I was looking for something else in the forums, but I saw this post and 1. wanted to say Hi fellow Webflow-using person! Small world!! and 2. I have totally encountered this bug and you’re not alone.

I checked out your animations on ios Chrome and they worked fine (looks great btw), then navigated to another tab, came back and they’re broken. If you close Chrome and reopen they will work fine again. I believe the issue stems from the way Webflow has built these native components to animate via CSS and not JS. And for whatever reason, Chrome for ios can’t handle them.

Here’s a related forum discussion (not exactly the same issue but it’s the closest I’ve found) from css-tricks: Problem with transition of transform property in Chrome on iOS - CSS-Tricks - CSS-Tricks and a related ticket within Chrome’s error tracking system (which tells us they are aware…and haven’t fixed): 899130 - chromium - An open-source project to help move the web forward. - Monorail

So this isn’t really a fix, but my solution has just been to drop in third party plugins for slideshows. cycle2 is easy to drop in and can be used with CMS content as well, and I believe Swiper is the other one that plays really well with Webflow. And for navbars, I just custom-code them now because I can’t deal with Webflow’s navbar component’s limitations anymore. Let me know if I can help more or if you want code snippets :slight_smile:

3 Likes
3

What’s up Leslie! Small world!

Thanks for the tips/links. That’s exactly what is happening. I’ll take a look at those solutions and see what the effort is.

PS - I sent you a LinkedIn to keep and touch and see what you’re working on!

1 Like
4

Thanks dgleslie, that was driving me nuts! :sweat_smile:

5

Also, animations get restricted on power save mode =]