How to stop white flicker on mobile Safari fixed‑position overlays

by

Summary

Customers are experiencing persistent white flickering on Safari mobile browsers, where the entire layout flashes white indefinitely. Reproduction on the reporter’s device fails, and the issue appears sporadically across multiple accounts. The problem seems tied to Zoom‑in CSS for phone users and involves a complex stylesheet structure.

Root Cause

  • Safari compositing bug: Fixed‑position elements with transform/opacity transitions trigger forced repaints that Safari handles inconsistently.
  • Timer‑driven style toggles: Elements like #fqb-m toggle opacity and classes every 200 ms, causing rapid layout recalculations.
  • Conditional stylesheet loading: The if=$player != NULL && $canUseFarmQueueGlobally block injects extra CSS only for certain users, adding unpredictable load order.
  • Cache‑control headers: max-age=0; no-cache; expires=0 force the browser to re‑evaluate resources on every navigation, amplifying repaint frequency.

Why This Happens in Real Systems

  • Mobile Safari has a different rendering pipeline than desktop Chrome/Edge, especially when handling CSS variables inside calc() or rgba() with pointer-events:none.
  • The fixed‑position overlay (#fqb-m) uses both transform: translateY(20px) and opacity toggles, which Safari treats as separate layers and may discard intermediate states.
  • The Zoom‑in CSS (designed for small screens) adds extra max-width and font-size adjustments that can conflict with the overlay’s z-index stacking context.

Real-World Impact

  • User retention drop: Even a single flash can increase bounce rates by ~3‑5 %.
  • Support overload: Each reported case requires multiple engineer hours to diagnose.
  • Brand perception: Persistent visual glitches lead to negative app‑store reviews and perceived unreliability.
  • Diagnostic blindness: The intermittent nature makes the issue hard to QA locally, resulting in wasted debugging cycles.

Example or Code (if necessary and relevant)

#fqb-m {
  opacity: 0;
  transition: opacity .2s;
}
#fqb-m.fqb-mv { opacity: 1; }
#fqb-m {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
}

This snippet illustrates the exact CSS class that toggles opacity and transform, which Safari sometimes fails to render smoothly, leading to the white flash.

How Senior Engineers Fix It

  • Isolate the effect: Replace opacity/transform toggles with a CSS class swap that only changes visibility (no layout impact).
  • Debounce the class change: Limit the interval to ≥ 300 ms or trigger only on user interaction.
  • Add -webkit-transform: translateZ(0); to force layer creation on the overlay, preventing Safari from dropping it during repaints.
  • Serve a minimal stylesheet for mobile Safari via a feature‑detecting @supports query, bypassing the problematic position:fixed; bottom:70px rule.
  • Cache‑control optimization: Add a stale‑while-revalidate directive for static assets to reduce full reloads.

Why Juniors Miss It

  • Focus on desktop reproducibility: They test only on Chrome/Edge and miss Safari‑specific repaint quirks.
  • Overlook CSS transition timings: Small differences in transition-duration are dismissed as “noise”.
  • Fail to inspect computed styles: They don’t use the browser’s Elements → Computed panel to see that pointer-events:none removes the element from layout calculations, causing hidden flicker.
  • Assume code changes alone fix it: Without understanding the rendering pipeline, they modify unrelated parts of the UI and see no improvement.

Leave a Comment