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?

1

1 Answer 1

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();
6
  • 1
    Thank you very much! This was driving me nuts!
    – leemon
    Aug 7, 2017 at 13:59
  • technically, TypeError: document.getElementsByClassName(...).focus is not a function, but the idea is clear :)
    – Aprillion
    Nov 29, 2017 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 <script> hack Jan 18, 2018 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 <head> or just before </body> 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. Jan 23, 2018 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. Jan 24, 2018 at 23:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.