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
}
@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