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