630493 - HTML5 input autofocus scrolls page

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Kroc Camen]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b10) Gecko/20100101 Firefox/4.0b10
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b10) Gecko/20100101 Firefox/4.0b10

The HTML5 autofocus attribute on input elements scrolls the browser view down to the input immediately on page load.

This is undesired because if a webpage is designed such a way (or the browser viewport is not tall enough) that the input is below the fold, the user may suddenly find themselves looking at a part of the page below the masthead, and not be sure what site they are on, or have missed important title information pertinent to the input in question.

Imagine for example a EULA which required the user to read the lengthy text and enter the word "OK" in the textbox at the bottom. To save a click, the developer may want to add autofocus to the input. It does not help the end user if the browser automatically scrolls right to the bottom of the page where it is not evident what they are looking at, why, and what action to do next.

Reproducible: Always

Steps to Reproduce:
Open attached test case in Firefox 4
Actual Results:  
Whoops, now you don’t know where you are and have missed important information.

Expected Results:  
Page loads looking at the top, like every other website.

Chrome also suffers from the same problem. In Safari there is an instant scroll back up. This is odd, but suffices.

Comment 1

[Kroc Camen]

Attachment: input autofocus scroll test case

Comment 2

[Cork]

As far as i can see what happens is as expected from a user point of view, and it follows what the specs state.

"Queue a task that checks to see if the element is focusable, and if so, runs the focusing steps for that element. User agents may also change the scrolling position of the document, or perform some other action that brings the element to the user's attention. The task source for this task is the DOM manipulation task source."
http://www.whatwg.org/specs/web-apps/current-work/#autofocusing-a-form-control

It would be quite weird if you had key focus in a text field but it wasn't visible on the screen.

This also the current behavior is parity chrome and opera. Based on these, i'm going to close this bug as invalid.

Comment 3

[thomas]

This tripped me up as well when setting up a new layout. The input was above the fold but the browser scrolled anyway.

In my opininon the browser should only scroll if the input is below the fold or maybe only if the user starts typing.

Comment 4

[gserg.g]

This is definitely happening in Firefox 34.

There is a multiline textarea with autofocus approximately in the middle of the screen (distance from top of the page to the textarea is fixed, when the page is srolled to the top the textarea is in the middle of the screen, fully visible and very far from the edges).

Firefox scrolls the page to move the textarea closer to the top of the screen on each page load. The more content below the textarea, the further up Firefox scrolls. If the page is long enough, the textarea ends up right at the top of the screen, with its top border being even slightly beyond the edge.

This is very annoying because it hides the important page header.

This cannot be worked around by calling e.g. scrollTop() with jQuery because Firefox seems to scroll down after the page-ready handler has returned.

We had to stop using the autofocus attribute because of this issue and fell back to jQuery's focus() on page load.