16

Actually, this is more of an error description than a question.

I noticed flash of unstyled content (FOUC) in Firefox on a very simple login page. There are no images used. No heavy CSS. All Javascript placed at the end of the code, right before the closing body tag. But when the page loads, Firefox shows a completely unstyled page for about 100 ms and then the css takes effect. This happens everytime, without exception.

Accidently I found some sort of a hack to solve this: Just add a <script> element to the <head>, place any javascript code you like in it or even a simple comment and - bam! - problem solved. Like this:

<script>/* foo */</script>

The actual reason for that FOUC seems to be the use of the autofocus attribute with one of the form fields. So removing 'autofocus' solves the problem too.

Isn't that weird? Does anyone know a better solution than mine?

Christian
  • 325
  • 2
  • 10
  • 2
    I guess this is a duplicate of https://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951 – Christopher K. Dec 08 '17 at 10:26

1 Answers1

11

I can confirm this behaviour in Firefox v.53, by elimination I tracked it down to the 'autofocus' attribute on an text input too.

You can remove the FOUC by setting the focus in Javascript instead, something like:

document.getElementsByClassName('form-field')[0].focus();

Or with jQuery: 

$('.form-field').focus();
RobinJ
  • 5,022
  • 7
  • 32
  • 61
Nick Bergquist
  • 111
  • 7
  • 1
    Thank you very much! This was driving me nuts! – leemon Aug 07 '17 at 13:59
  • technically, `TypeError: document.getElementsByClassName(...).focus is not a function`, but the idea is clear :) – Aprillion Nov 29 '17 at 15:23
  • I always load my jquery at the end of the script so would this work then, or is this only for jquery loaded at the beginning? So far I am using the – Thomas Williams Jan 18 '18 at 11:44
  • @ThomasWilliams - not sure I follow you there... try executing your jQuery code in a DOM-ready block, something like $(function () { ... code... }); to ensure you have a reference to the the form element and make sure it's executed after the jQuery library has loaded so that you don't get a reference error. The form element gaining focus should work if you call the jQuery library in the or just before but the latter will cause a reference error if you are placing jQuery code inline in the HTML that is not in a DOM-ready block. – Nick Bergquist Jan 23 '18 at 21:50
  • Hi Nick, thanks for your reply, but there was a bug in firefox which was causing my problem. It went away when firefox was updated strangely. – Thomas Williams Jan 24 '18 at 23:48
  • Look [this bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=712130) for more information about this issue. – Steely Wing Feb 14 '18 at 08:32