Elements not being shown on mobile browsers using webkit and quantum (safari and firefox)

Design help Animations & Interactions
1

Hello,

We have a simple moving animation of many images structured within a series of div blocks going across the screen. There seems to be some incompatibility issue with browsers using webkit/quantum as the elements do not show in the mobile view. On all Chromium/Blink-based browsers (such as Chrome on Desktop and Edge), the Animations seem to be working as intended.

When we toggle preview via webflow, the elements show and the animation works in the mobile breakpoint, but when we publish the site, the elements will not show/animation doesn’t work.

ASK:
Looking for assistance with finding a workaround so the animations are functional across all browsers/devices. Would be very grateful if someone who has faced this issue before could shed some light here. Thanks.

A suggestion made by Webflow support was the following:

" it may be possible to adjust the behavior on your animations for specific browsers via custom code and the use of Vendor Prefixes [:arrow_upper_right:]. I also managed to find this article from QuackIt discussing Browser Compatibility of CSS Animations which may be useful as well: CSS -webkit-animation | QuackIt [:arrow_upper_right:]"

READ ONLY LINK: https://preview.webflow.com/preview/integral-studios-d7daae-18cb06749d24a45?utm_medium=preview_link&utm_source=dashboard&utm_content=integral-studios-d7daae-18cb06749d24a45&preview=9f9ad4c890d0279ba8010f466ea4bf64&workflow=preview

PUBLISHED SITE LINK: https://integral-studios-d7daae-18cb06749d24a45.webflow.io/

  • Please compare viewing on desktop and mobile