Skip to content

Preview: white flash when navigating between dark-background pages (load new page off-screen, swap when ready) #4

Description

@trieloff

Summary

When the currently-previewed page has a dark background and you open a different page for preview, there's a brief flash of white before the new page paints.

Cause

The preview reuses a single <webview> and navigates it by setting webview.src (showPreviewsrc/renderer/renderer.js:378, webview created in ensurePreviewWebview, :333). During the load the webview shows its default white background until the new document's own background paints, so a dark→dark transition flashes white in between. (A cross-origin preview is worse: ensurePreviewWebview tears down and recreates the webview entirely.)

Suggested fix — double-buffer the swap

Load the new page in a hidden/offscreen webview, wait for it to finish loading, then swap it in and remove the old one:

  1. Create a second <webview> offscreen with the new src.
  2. Wait for did-finish-load (or did-stop-loading / dom-ready) — there's already a did-finish-load listener pattern at renderer.js:311.
  3. Swap the new webview into place and destroy the previous one (destroyPreviewWebview, :261).

This way the visible view only changes once the incoming page has rendered, so there's no intermediate blank frame.

Smaller mitigations (optional / complementary)

  • Set the webview's background color to a neutral/dark default (background-color CSS or the <webview> background) so any unavoidable gap is less jarring.
  • Keep the old frame visible until the new one is ready rather than blanking on navigation.

The load-then-swap approach is the proper fix; the background-color tweak is a cheap partial mitigation.

Acceptance criteria

  • Navigating between two dark-background pages shows no white flash
  • Works for both same-origin navigation and cross-origin preview swaps

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingenhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions