Skip to content

Instantly share code, notes, and snippets.

@Ramblurr

Ramblurr/firefox-paint-hold-issue.md

Created June 17, 2026 15:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ramblurr/d849e03c1f077dbdd520780e53f7a805 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ramblurr/d849e03c1f077dbdd520780e53f7a805 to your computer and use it in GitHub Desktop.
Download ZIP
Firefox flashes white before async-rendered page content appears
Raw
firefox-paint-hold-issue.md

What did you do? (steps to reproduce)

I tested same-origin navigation between two documents. Each destination document starts with an empty , then sets its visible content via a setTimeout in js.

I have prepared a simple repro. The attached files are two static HTML pages. Each page starts with <body></body>. After DOMContentLoaded, each page schedules setTimeout(..., 0) and then replaces body.innerHTML with a full-page colored link to the other page.

Attached is also a screen recording of the issue with a side by side Chromium and Firefox comparison

2026-06-17.17-45-37.mp4

What happened? (actual results)

Firefox briefly flashes the white empty body between pages.

In Chrome navigating between these two pages results in a clean swap, no flash or flickering.

What should have happened? (expected results)

The previous page should remain visible until the destination page paints. Firefox should paint-hold same-origin navigation even on async renders and avoid the intermediate white frame flash.

  • Firefox version: 152.0b9
  • OS: Linux, wayland
  • Also affects Firefox on Android 151.0.4
Raw
page1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page 1</title>
<style>
html, body {
min-height: 100%;
margin: 0;
background: white;
font-family: system-ui, sans-serif;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #075985, #172554);
}
a {
padding: 2rem;
border-radius: 1rem;
background: rgb(15 23 42 / 70%);
color: white;
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 800;
line-height: 1;
text-decoration: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
document.body.innerHTML = `
<main>
<a href="page2.html">Page 1 → Page 2</a>
</main>
`;
}, 0);
});
</script>
</head>
<body></body>
</html>
Raw
page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page 2</title>
<style>
html, body {
min-height: 100%;
margin: 0;
background: white;
font-family: system-ui, sans-serif;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #7e22ce, #4a044e);
}
a {
padding: 2rem;
border-radius: 1rem;
background: rgb(31 7 54 / 70%);
color: white;
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 800;
line-height: 1;
text-decoration: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
document.body.innerHTML = `
<main>
<a href="page1.html">Page 2 → Page 1</a>
</main>
`;
}, 0);
});
</script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment