In my hero section I have four divs with background images called .splash that animate when the user hovers over the islands or automatically on mobile devices.
The animation is Webflow native and it simply changes the height of the div from 0 to 100% and the rotation from 0 to 360 deg (Y). Initial states are set, as well as transforms in the designer.
On chrome desktop and Android devices it all works as intended, however on my iPhone and iPad it flickers like crazy (and I can only assume it does the same on Macs). The odd thing is that if I swipe down as if to refresh I can sometimes see the animation working smoothly just above the page, so it seems to be clashing with elements around it rather than itself.
The following popular fixes have failed me:
-webkit-transform: translateZ(0);
-webkit-transform:translate3d(0,0,0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
P.S. See the live site for the animation, as it’s triggered via custom code.
Here is my public share link: LINK
Here is my live site: LINK
Here is a video of the glitch on an iPhone: LINK