Firefox has long FOUC on master branch #8328

Closed
mrclay opened this Issue May 19, 2015 · 5 comments

Comments

Projects
None yet
2 participants
@mrclay
Member

mrclay commented May 19, 2015

With simplecache this is mostly a first-load or manual refresh issue, without it's every page load.

@mrclay mrclay added this to the Elgg 2.0.x milestone May 19, 2015

mrclay added a commit to mrclay/Elgg-leaf that referenced this issue May 19, 2015

fix(ui): Eliminates FOUC in Firefox
Moving a script below the CSS blocks rendering until the CSS is loaded.

Fixes #8328
@mrclay

This comment has been minimized.

Show comment
Hide comment
Member

mrclay commented May 19, 2015

PR #8329

@mrclay

This comment has been minimized.

Show comment
Hide comment
@mrclay

mrclay May 19, 2015

Member

I believe Firefox is, unlike other browsers, not treating CSS as a render-blocking resource, so it will happily start rendering before the CSS loads...at least if there's no script element following them. Moving a script below the CSS links causes FF to stop and wait for the CSS.

@stevesouders have you written about this? I surely got this trick from you.

Member

mrclay commented May 19, 2015

I believe Firefox is, unlike other browsers, not treating CSS as a render-blocking resource, so it will happily start rendering before the CSS loads...at least if there's no script element following them. Moving a script below the CSS links causes FF to stop and wait for the CSS.

@stevesouders have you written about this? I surely got this trick from you.

@mrclay mrclay referenced this issue in ajlkn/skel May 19, 2015

Closed

Flicker of unstyled content on Firefox #4

@mrclay

This comment has been minimized.

Show comment
Hide comment
@mrclay

mrclay May 19, 2015

Member

Created a test page and my statement above isn't true generally, but is definitely happening with Elgg at the master branch. Raw HTML then re-rendering once the CSS arrives. Strange.

Member

mrclay commented May 19, 2015

Created a test page and my statement above isn't true generally, but is definitely happening with Elgg at the master branch. Raw HTML then re-rendering once the CSS arrives. Strange.

@mrclay

This comment has been minimized.

Show comment
Hide comment
@mrclay

mrclay May 19, 2015

Member

<script></script> below CSS: FOUC
<script>;</script> below CSS: No FOUC!

Identical network activity. Firefox what are you doing?

Member

mrclay commented May 19, 2015

<script></script> below CSS: FOUC
<script>;</script> below CSS: No FOUC!

Identical network activity. Firefox what are you doing?

mrclay added a commit to mrclay/Elgg-leaf that referenced this issue May 19, 2015

fix(ui): Eliminates FOUC in Firefox
Firefox has an unusual bug (at lease on our pages) where CSS doesn’t
block rendering, so unstyled HTML is being displayed before our CSS is
loading. Placing any non-empty script below the CSS links causes FF to
properly wait until the CSS is loaded. Here we just move the script we’re
already using below the CSS links.

Fixes #8328

@ewinslow ewinslow closed this in #8329 May 19, 2015

@Yepoleb

This comment has been minimized.

Show comment
Hide comment
@Yepoleb

Yepoleb Aug 22, 2017

Thanks for this fix! Used it in my own project.

Yepoleb commented Aug 22, 2017

Thanks for this fix! Used it in my own project.

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