HTML 5 Autofocus messes up CSS loading

StackOverflow https://stackoverflow.com/questions/18943276

  •  29-06-2022
  •  | 
  •  

質問

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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top