HTML 5 Autofocus Messes Up CSS Loading

HTML 5 Autofocus messes up CSS loading

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>

Autofocus doesn't work on Firefox and doesn't work when coming from another page

You can try with:

$("#username").focus();

after the page has been loaded.

How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?

A solution is to set tabindex="-1" on ALL input fields to keep HTML placeholders visible.

Why does calling focus() break my CSS transition?

As @user1585345 correctly stated a browser immediately scrolls to the focused element in order to bring it inside the current view, and not a px further!

What happens here is the following: you change the relative position of your element, but immediately you change focus, since the focused elements when the event fires is not visible the content also scrolls (ending the animation abruptly).

You should explicitly fire your focus only when the animation is complete, so that the browser recognise that no scrolling is necessary.

One solution is (suggested by @Mark)

there are two event listeners 'ontransitionend' and 'onanimationend'
you can add an event for and then fire your focus() function

HTML 5 Autofocus Messes Up CSS Loading