How to prevent the webview from showing unrendered DOM in between page loads?

[myarcana]

iOS WKWebView shows flashes between full-page navigations. I guess it unloads the previous page's DOM, shows the background of the web view, then renders the new page.

Safari (unfairly) does not have this issue.

Here's an MRE project:

https://github.com/myarcana/flash-of-dom-capacitor-issue

Does anyone know how I can prevent this flash in between navigations?

[MILLERMARRU]

Checked the iOS bridge source to see what's actually behind that flash, since "unrendered DOM" implied to me it might just be a solid color showing through rather than literal blank content. In CAPBridgeViewController.swift, the WKWebView and its scrollView get their backgroundColor set once at webview creation, from your capacitor.config's backgroundColor if you set one, or UIColor.systemBackground otherwise. During a full-page navigation, there's a genuine gap where WKWebView has unloaded the old page and hasn't finished rendering the new one — and what you see during that gap is exactly this background color, not literally "nothing." That matches your repro (a flash of a solid background, not literally a blank/corrupt frame).

Two ways to attack it, cheapest first:

1. Match backgroundColor to your page's actual background in capacitor.config ({ backgroundColor: '#yourcolor' }, or per-platform under ios.backgroundColor). If your app's real background isn't white/systemBackground, this alone usually makes the flash imperceptible since the "gap" color becomes indistinguishable from the page underneath it.
2. The more robust fix: avoid full-page WKWebView navigations altogether. Capacitor apps are built around being SPAs specifically because native full navigations reload the whole webview (which is also what's destroying/recreating the webview content each time and causing this flash in the first place, plus it re-triggers plugin bridge init cost) — if what you're navigating between is content you control, switching those links to client-side routing removes the underlying navigation entirely rather than just hiding it with a matched background.

Your MRE is on #1 cause since you're hardcoding no custom background — worth trying that config option first as the quick fix, and only reach for #2 if this happens on links you're already routing to a router but hard-linking with <a href> instead.