[BUG] Images flicker during HTMX page transition in the preload extension

Open romaric-siri opened this issue 9 months ago • 0 comments

Issue

Images flicker (briefly showing white background) during HTMX page transitions in Firefox only, even when properly preloaded. We can't see very good on the video but :

When I refresh the page, click on the link, I can see briefly the white background before showing the image
When the image is cached, then I never see this white background again ...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX SPA</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/preload.js"></script>
</head>
<body hx-ext="preload">
    <nav>
        <a href="/home" hx-get="/pages/home.html" hx-target="#content" preload-images="true" preload="mouseover">Home</a>
        <a href="/about" hx-get="/pages/about.html" hx-target="#content" preload-images="true" preload="mouseover">About</a>
        <a href="/contact" hx-get="/pages/contact.html" hx-target="#content" preload-images="true" preload="mouseover">Contact</a>
    </nav>
    <div id="content" hx-get="/pages/home.html" hx-trigger="load"></div>
</body>
</html>

# Details

Images and links are correctly prefetched in Firefox
When clicking a link, images briefly flash (white background) before appearing
This only happens in Firefox, works fine in other browsers
preload-images="true" attribute is already being used

Any suggestions to prevent this Firefox-specific image flickering during page transitions? I want to to be absolutly instant, even on the first click ! ;)

https://github.com/user-attachments/assets/c20ffeb7-0362-4463-a0ae-381b6fccc1cf

Mar 11 '25 13:03 romaric-siri