HTML 5 Autofocus messes up CSS loading

autofocus, css, firefox, html

Solution

I have found that by adding some JavaScript in the `<head>`, the page waits for the style to load before the focus.

I'm not exactly sure why this works, but it does!

Example:

<script type="text/javascript">
    // Fix for Firefox autofocus CSS bug
    // See: http://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951
</script>

Problem

When I set `autofocus="autofocus"` on an input element, then in Firefox, when the page loads, it displays for a split second without the CSS applied. (E.g. content not centered, heading rendered in default font etc.) If I remove the autofocus, the page loads fine and displays when it is ready. Is there a way to get the page to load normally while using the `autofocus` feature in Firefox?

Original source