What could be causing the flickering issue on mobile when previewing a company site rebuild in Webflow using the Chrome app on an iPhone XR?

Mobile flickering issues in Webflow—especially on iPhone XR with Chrome—are often caused by rendering conflicts like transforms, fixed positioning, or interactions that force excessive repaints or reflows.

​

1. Check for Fixed or Sticky Positioned Elements

​

• Fixed elements like navbars, footers, or scroll-to-top buttons often create flicker, especially if combined with blurring effects or animations.
• Try disabling position: fixed on those elements or switching to position: sticky where possible.

​

2. Inspect Interactions & Scroll Animations

​

• Webflow’s interactions such as scroll-in animations or looping animations (e.g., Lottie triggers or continuous scroll moves) can force re-renders.
• Reduce or temporarily disable animations triggered on scroll or page load to see if the flicker disappears.
• Check for "While Page is Scrolling" actions or elements moving on each scroll frame.

​

3. Avoid CSS Transforms on Mobile Elements

​

• Transform: translate(), scale(), or rotate() can cause flickering, especially if applied on large or fixed elements.
• Instead of transform, try using top/left/width/height with percentages or pixels.

​

4. Background Blur & Filters

​

• Backdrop-filter for frosted glass effects can trigger GPU redraw issues, particularly on mobile Chrome on iOS.
• Try removing blur filters from navigation or modals to test.

​

5. Check for Overflow Issues

​

• Hidden or unnecessary overflow: scroll/auto properties (especially on body or html) can cause layout recalculations.
• Ensure all containers have proper overflow settings and no ghost elements extend beyond the viewport.

​

6. Avoid Large Fixed Elements Covering Viewport

​

• Large full-height modals or banners with position: fixed may conflict with the mobile browser’s UI (like the address bar resizing), causing flicker.
• Switch to absolute positioning within a container or restructure such components.

​

7. Use Safari for iOS Preview

​

• Chrome on iOS uses Safari’s WebKit engine, but with certain limitations. Use Safari for closer alignment with iOS browser behavior, and compare results.

8. Test on Webflow Staging vs Published Domain

​

• Some flickers may only appear on webflow.io subdomains during preview.
• Publish to your custom domain and test again—iOS rendering may change slightly based on domain-level caching or optimization.

​

Summary

​

To fix mobile flickering on an iPhone XR in Chrome, review use of fixed/sticky elements, scroll-triggered interactions, CSS transforms, and backdrop filters. Simplify animations and avoid full-screen fixed elements where possible. Also compare behavior on Safari, and test on your published domain for the most accurate results.