Firefox renders pages and _then_ applies the styles (page &#34;jumps&#34; as a result) #696

@MCF commented on GitHub (May 9, 2017):

Sorry I looked for an exisiting issue/PR but had forgotten that this class of problem had an acronym (FOUC). Looks like my report is a duplicate.

Seems odd though that the problem occurs on any page load - not just on the first page load of the site. There is a lot of javascript in the site though, so perhaps having CSS cached or not has no impact on the problem.

@MCF commented on GitHub (May 9, 2017): Sorry I looked for an exisiting issue/PR but had forgotten that this class of problem had an acronym (FOUC). Looks like my report is a duplicate. Seems odd though that the problem occurs on any page load - not just on the first page load of the site. There is a lot of javascript in the site though, so perhaps having CSS cached or not has no impact on the problem.

GiteaMirror commented

@silverwind commented on GitHub (May 10, 2017):

Do you perhaps have your browser cache disabled (like I do)? In theory, the FOUC shouldn't be as bad when the assets are cached in the Browser. Check in the DevTools Network tab, if there are 200 responses when you reload, caching isn't active.

Of course this whole situation could be improved by either using HTTP2 or by concatenating the JS/CSS assets on Gitea's side. Another approach could also be to include a few layout-critical styles in the HTML.

@silverwind commented on GitHub (May 10, 2017): Do you perhaps have your browser cache disabled (like I do)? In theory, the FOUC shouldn't be as bad when the assets are cached in the Browser. Check in the DevTools Network tab, if there are 200 responses when you reload, caching isn't active. Of course this whole situation could be improved by either using HTTP2 or by concatenating the JS/CSS assets on Gitea's side. Another approach could also be to include a few layout-critical styles in the HTML.

GiteaMirror commented

@MCF commented on GitHub (May 10, 2017):

On my windows machine I have Firefox set to clear history when it is closed. So request to request it is loading most of the gitea content from cache if you are looking at the Network tab in dev tools.

I checked with Firefox 53.0.2 on MacOS and it has the same problem but much less severely (perhaps once ever 4 or 5 page loads do you see the flash). I tried it with content being cached, and without. It did not seem to make much of a difference - which surprised me.

FWIW github.com also has a FOUC if you arrive without anything in the browser cache. It is very obvious on Firefox on Windows 7. Not noticeable at all with Firefox on MacOS.

@MCF commented on GitHub (May 10, 2017): On my windows machine I have Firefox set to clear history when it is closed. So request to request it is loading most of the gitea content from _cache_ if you are looking at the Network tab in dev tools. I checked with Firefox 53.0.2 on MacOS and it has the same problem but much less severely (perhaps once ever 4 or 5 page loads do you see the flash). I tried it with content being cached, and without. It did not seem to make much of a difference - which surprised me. FWIW github.com also has a FOUC if you arrive without anything in the browser cache. It is very obvious on Firefox on Windows 7. Not noticeable at all with Firefox on MacOS.

GiteaMirror commented

@sondr3 commented on GitHub (May 13, 2017):

I'm pretty sure this has to do with how Gitea loads fonts with CSS. I'll look into it this weekend.

@sondr3 commented on GitHub (May 13, 2017): I'm pretty sure this has to do with how Gitea loads fonts with CSS. I'll look into it this weekend.

GiteaMirror commented

@sondr3 commented on GitHub (May 14, 2017):

Dang, didn't know creating a fork and referencing an issue in a commit would ping the upstream repo before the pull request. In any case, I've created a fix for this that locally removes the FOUC. I've tested this in Firefox 53.0.2 on OS X Sierra and since this doesn't happen in Chrome there is no change besides the added JS. Would be nice if someone could also test and verify (but it should work).

@sondr3 commented on GitHub (May 14, 2017): Dang, didn't know creating a fork and referencing an issue in a commit would ping the upstream repo before the pull request. In any case, I've created a fix for this that locally removes the FOUC. I've tested this in Firefox 53.0.2 on OS X Sierra and since this doesn't happen in Chrome there is no change besides the added JS. Would be nice if someone could also test and verify (but it should work).

GiteaMirror commented

@bkcsoft commented on GitHub (May 14, 2017):

Actually quite simple to fix. Move all <script> and <link> to the bottom of <body> instead of inside the <head>.

@bkcsoft commented on GitHub (May 14, 2017): Actually quite simple to fix. Move all `<script>` and `<link>` to the bottom of `<body>` instead of inside the `<head>`.

GiteaMirror commented

@sondr3 commented on GitHub (May 14, 2017):

You mean move the CSS to the bottom as well?

@sondr3 commented on GitHub (May 14, 2017): You mean move the CSS to the bottom as well?

GiteaMirror commented

@bkcsoft commented on GitHub (May 14, 2017):

@sondr3 yes

@bkcsoft commented on GitHub (May 14, 2017): @sondr3 yes

GiteaMirror commented

@sondr3 commented on GitHub (May 14, 2017):

As far as I know CSS should always be in the <head> of a webpage, not anywhere else.

@sondr3 commented on GitHub (May 14, 2017): As far as I know CSS should always be in the `<head>` of a webpage, not anywhere else.

GiteaMirror commented

@bkcsoft commented on GitHub (May 14, 2017):

No, putting CSS in <head> makes them load async, while putting them in the <body> will make them load sync, and not render the page until they're all loaded.

@bkcsoft commented on GitHub (May 14, 2017): No, putting CSS in `<head>` makes them load async, while putting them in the `<body>` will make them load sync, and not render the page until they're all loaded.

GiteaMirror commented

@sondr3 commented on GitHub (May 14, 2017):

I'll look into it.

@sondr3 commented on GitHub (May 14, 2017): I'll look into it.

GiteaMirror commented

@bkcsoft commented on GitHub (May 14, 2017):

External stylesheets (as in <link rel="stylesheet" [...]> is the only thing that needs moving

@bkcsoft commented on GitHub (May 14, 2017): External stylesheets (as in `<link rel="stylesheet" [...]>` is the only thing that needs moving

GiteaMirror commented

@sondr3 commented on GitHub (May 14, 2017):

Putting the Font Awesome CSS in the footer didn't solve the problem, you still get the FOUC because your browser will wait with drawing your DOM until all your CSS and JS is parsed.

@sondr3 commented on GitHub (May 14, 2017): Putting the Font Awesome CSS in the footer didn't solve the problem, you still get the FOUC because your browser will wait with drawing your DOM until all your CSS and JS is parsed.

GiteaMirror commented

@bkcsoft commented on GitHub (May 14, 2017):

It's not only the FA-CSS that needs to move, it's all the CSS-files. And no, it doesn't wait to draw the DOM since then we wouldn't get FOUC, FOUC is because it does draw the DOM before all styles are loaded, then redraws it again after they are loaded

@bkcsoft commented on GitHub (May 14, 2017): It's not only the FA-CSS that needs to move, it's all the CSS-files. And no, it doesn't wait to draw the DOM since then we wouldn't get FOUC, FOUC is because it _does_ draw the DOM before all styles are loaded, then redraws it again after they are loaded

GiteaMirror commented