HTML 5 Autofocus messes up CSS loading

僤鯓⒐⒋嵵緔 提交于 2019-11-27 16:06:11

问题


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?


回答1:


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!