Menu
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?
536
A flash of unstyled content (or flash of unstyled text) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved.
FOUC stands for Flash of Unstyled Content. This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet.
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
