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?

Flickering on mobile (especially in Chrome on iPhone XR) when previewing a Webflow project is often related to layout shifts, hardware acceleration conflicts, or third-party interactions.

1. Fixed or Sticky Elements Causing Repaints

• Sticky/Fix-positioned elements (especially navbars or footers) can cause flickering if they overlap with other animating items.
• iOS browsers sometimes trigger forced repaints due to layout recalculations, especially with GPU-accelerated CSS transforms (like translateZ).
• Solution: Replace fixed with absolute where possible or minimize z-index stacking complexity. Check all sticky headers or overlays.

2. CSS Transforms & Animation Overlaps

• Using CSS transform properties (like scale, translate, rotate) on large containers or images can trigger flickering during scrolling.
• These effects force the browser to rely on hardware compositing, which behaves unpredictably in Safari/WebKit (used by Chrome on iPhone).
• Solution: Avoid animating large sections or background elements on mobile. Test removing sections with transform effects to isolate the culprit.

3. Viewport Units and 100vh Issues

• Using 100vh on iOS can be problematic due to the browser’s dynamic toolbars resizing the viewport.
• This can cause visual jumps/flickering when the viewport height recalculates during scroll.
• Solution: Use “100%” height or min-height using custom JavaScript fixes, or Webflow’s vh fallback units (--vh custom properties via CSS).

4. Custom JavaScript Interactions

• Third-party scripts (like tracking pixels, cookie banners, or scroll libraries) can conflict with native browser rendering, causing flashing.
• Heavy on-scroll triggers or scrollIntoView animations can cause layout thrashing.
• Solution: Temporarily disable third-party integrations to test, especially those modifying layout or visibility dynamically.

5. Image Heavy Sections or Lazy Loading

• Large images or background videos that use lazy loading can cause jank or flicker when rendered in mobile Safari/Chrome.
• Webflow uses loading="lazy" by default for many assets.
• Solution: Consider removing lazy loading on above-the-fold images or convert background videos to Lottie or optimized MP4 with fallback.

6. Webflow Interactions Overload

• Long chains of Webflow interactions (show/hide, scale, opacity) within sections may overload mobile rendering.
• Animations using display: none/block can cause a full layout reflow.
• Solution: Use opacity and visibility instead of display for show/hide actions, or simplify interaction chains for mobile breakpoints.

Summary

The flickering in Chrome on iPhone XR is likely caused by layout shifts due to fixed elements, transform animations, or vh unit behavior on iOS. Simplify animations, avoid fixed headers when possible, and test layout responsiveness with real devices or WebKit simulators to isolate the root cause.