You built a gorgeous dark site. Then you click a link and, for a split second, the whole screen flashes white before the next page appears. Ouch. It is jarring, it looks unpolished, and it is one of the most reported problems in the Squarespace community.
The good news is that the most common cause has a short fix. Let’s dive in!
Why does the flash happen?
When you click a link, your browser starts loading the next page. For a brief moment, before the new page’s styles have arrived, the browser has nothing to paint, so it paints its default background: white.
On a light website, you never notice because white matches. On a dark or colorful website, that moment of white is very visible.
The fix is to tell the browser what color to paint right away, before anything else loads. We do that by giving the page’s outermost element a background color inside a tiny style tag in your Code Injection.
Step 1: Find your background color
You need the exact color of your site’s background. There are two easy ways to find it:
- Open your site styles and look for your color palette. The color your page background uses will be listed there with its hex code (something like #111111).
- Or open your live site, right-click an empty part of the page, choose Inspect, click on the body or main element, and look for the background color in the styles panel.
If your site has different colored sections, use the color of the section people see first, which is usually the top of your home page.
Step 2: Add the code
This one goes in Code Injection, in the Header box. Menu names change from time to time, so if you cannot spot it, look in your website settings for Code Injection or Custom Code. Availability of code features depends on your Squarespace plan.
- Open your site settings and find Code Injection.
- Paste the code below into the Header field.
- Change
#111111to your own background color. - Save and refresh your live site.
The code
<style>
/* Paint the page background immediately, before anything else loads */
html { background-color: #111111; } /* use the same color as your site background */
/* Optional: fade between pages in browsers that support it (others ignore this) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.25s; }
</style>That is it. The first rule paints your background color instantly. The second part is optional and a nice bonus, which we will get to in a second.
What is that @view-transition bit?
Newer browsers can fade smoothly from one page to the next on their own, as long as both pages are on the same site. The @view-transition line switches that on, and the lines below it make the fade a quick quarter of a second.
Browsers that do not support it just ignore those lines and carry on, so it cannot break anything. Support is good in recent versions of Chrome and Safari, and Firefox simply skips it. If you already use another page transition or loading animation on your site, test with and without these lines and keep whichever looks better.
How to test it properly
The flash is quick, and on a fast connection it can be hard to spot. Here is how to slow things down so you can check your fix:
- Open your live site in Chrome and open the developer tools (right-click, Inspect).
- Go to the Network tab and change the throttling option from No throttling to something like Slow 4G.
- Click around your site. If you see a smooth dark (or colored) page the whole time, you are done.
Common problems
I still see a flash
Double check that the code is in the Header box and not the Footer, and that your color matches. If the flash is a different color from your background, you may be matching the wrong section. Also remember to hard refresh your browser (hold shift while clicking reload), since your old styles can be cached.
The flash is now dark but my page is light
Your site’s top section might be a different color than the rest. Pick the color your visitors see first and stick with it. A small flash of a matching color is much less noticeable than white.
My background is an image or a gradient
You can still use a solid color here. Choose the dominant color from your image so the page never goes bright white while the image loads.
The flash happens only on certain pages
Some pages may have a section with a different background color. Look at the first section of the page that flashes and check whether it has its own color settings.
It flashes on mobile only
Mobile browsers sometimes handle page loads differently. Test on a real phone, since a desktop browser with a narrow window does not always behave the same way.
Want a more polished page change?
If you would like full control, with 25 transition effects, intro animations and text overlays, take a look at our Page Transition plugin in the plugin collection.
Want more snippets like this one? Browse the Code Vault, our library of ready-to-paste Squarespace code, with one payment and lifetime access.
Why this post? It answers one of the questions Squarespace users ask most in the community forums. The code above is free to use and change, and every snippet was tested before we published it.
