Skip to content

Instantly share code, notes, and snippets.

@pyronaur

pyronaur/index.html

Created October 26, 2017 14:01
Show Gist options
  • Save pyronaur/202dde59100ebc7220f0c623a79d1d91 to your computer and use it in GitHub Desktop.
Save pyronaur/202dde59100ebc7220f0c623a79d1d91 to your computer and use it in GitHub Desktop.
Download ZIP
BrowserSync FireFox FOUC
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="foobar">doobar</div>
</body>
</html>
Raw
instructions.txt
Tested with:
FireFox 57.0b8
BroswerSync 2.18.13
1. Install global browser sync
2. Place index.html and style.css in any folder
3. Run `browser-sync start --server --files "*.css"`
4. Change background colors to see a whie flash
In "unreduced" test case whe whole stylesheet is briefly removed and then re-rendered.
Raw
style.css
body {
margin: 0;
padding: 0;
background-image: url('https://picsum.photos//500/600');
}
#foobar {
position: absolute;
top: calc(50% - 125px);
left: calc(50% - 125px);
width: 250px;
height: 250px;
background-color: green; // rotate this to pink, blue, red, green, black
}
@MikeRatcliffe
Copy link

I couldn't reproduce this directly so I opened it in the responsive view and changed throttling to Regular 2G. After changing the colours it is clear what is happening.

BrowserScope works like this:

  1. The stylesheet is included with a timestamp to prevent caching:
  2. On CSS change the source of the stylesheet is changed. Because the old CSS file is no longer present it is unloaded. At the same time the new stylesheet is loaded.

If the new stylesheet takes a long time to load because of a slow network or if the file is large then there will be a FOUC between the stylesheet unloading and the new stylesheet loading.

We have recently made changes to the Firefox styling system that makes it much faster. In your case, because it is fast it removes the stylesheet very quickly which means a longer gap until the new CSS file downloads and a FOUC.

@pyronaur
Copy link
Author

So BrowserSync manually removes and then re-adds the files instead of replacing the URL?

In any case - if I throttle to "Bad 3G" in Chrome the old CSS stays in place until it can render the new CSS - there is no FOUC.

@MikeRatcliffe
Copy link

No, Firefox replaces the URL, which causes the old stylesheet to be removed and the new one added... this is the same in both browsers.

It is simply that when the old stylesheet is removed Firefox is faster to apply it to the page. When Chromes CSS engine catches up the same thing will start happening in Chrome.

In my opinion BrowserSync would be better adding the new stylesheet in addition to the old one and then removing the old one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment