adobe / adobe/aem-desktop

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

Open
#4 0 comments 0 reactions 0 assignees View on GitHub
bug enhancement
Dominant language
JavaScript
Stars
2
Forks
3
Avg merge
15m
Merged PRs (30d)
6

Description

## 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 `` and navigates it by setting `webview.src` (`showPreview` → `src/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 `` 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 `` 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

Contributor guide

Open the contributing guide

Research direction

Start in src/renderer/renderer.js at ensurePreviewWebview (:333), showPreview (:378), the did-finish-load listener pattern at :311, and destroyPreviewWebview (:261). Trace how same-origin navigation and cross-origin webview recreation currently work, then implement the load-then-swap flow. Done means dark-to-dark navigation has no white flash for either path and the previous webview is removed after the replacement is ready.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.