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?
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>
来源：https://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading