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 issues on mobile preview in Chrome (iPhone XR) are typically caused by rendering conflicts, especially involving animations, fixed positioning, or third-party code. Here's how to identify and fix the issue in Webflow:

1. Check for Fixed or Sticky Positioned Elements

• Elements with position: fixed or position: sticky can cause flickering when mobile devices struggle to redraw them during scroll or animations.
• Review your navbar, headers, or sticky CTAs to ensure they aren't overlapping other elements or animating rapidly.
• If using “while scrolling in view” animations on fixed elements, this often causes flickering.

2. Inspect Scroll-Based Animations or Interactions

• Complex scroll-triggered interactions (e.g., parallax, move/opacity changes) can flicker if they involve high paint layers or reflows.
• In Webflow, go to Interactions Panel → Page Scroll Animations and disable them temporarily to test.
• Be especially cautious of using both opacity and transform (e.g., move, scale) — these can strain the mobile GPU.

3. Reduce the Use of Blending Modes or Filters

• Mix-blend-mode or CSS filters (e.g., blur, brightness) are known to be GPU-intensive and may not render properly on mobile Chrome.
• Check for these styles in the affected elements and remove or simplify them.

4. Examine Third-Party Embeds or Scripts

• Scripts like Google Maps, chat widgets, or video embeds may cause forced reflows or iframe redraws.
• Set loading="lazy" where supported and test the page without embeds to isolate the issue.

5. Evaluate Overflow and Large Background Images

• Use overflow: hidden cautiously — incorrect usage around animated sections can clip content or cause jank.
• Large background images or videos without proper compression may also cause rendering lags.

6. Run a Webflow Preview vs Live Domain Test

• Webflow’s Designer/Preview mode sometimes flickers on mobile because it loads extra scripts for editing.
• Publish the site and test on your custom domain or Webflow.io subdomain to see if flickering persists outside preview mode.

7. Disable Hardware Acceleration Overrides

• Some iOS and Chrome versions get buggy with GPU acceleration for certain CSS transforms.
• Webflow automatically uses hardware acceleration in many cases (like transform3d), so avoid forcing custom CSS overrides through embed code.

Summary

Mobile flickering on Webflow sites in Chrome (iPhone XR) usually results from scroll-based animations, fixed/sticky elements, or GPU-heavy styles like blend modes or filters. To resolve it, simplify animations, avoid fixed interactions during scroll, remove heavy effects, and test the live version outside preview mode.