1701928 - scroll-padding not respected when scrolling an input into view in response to typing.

Status: VERIFIED FIXED

(Core :: Layout: Scrolling and Overflow, defect)

Description

[Robert Flack]

User Agent: Mozilla/5.0 (X11; CrOS x86_64 13597.105.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.208 Safari/537.36

Steps to reproduce:

1. Navigate to https://codepen.io/flackr/pen/xxRodzY
2. Click in the text box to focus it.
3. Scroll down such that the textbox is out of view
4. Type to scroll the textbox into view

Actual results:

Expect the textbox to scroll 30px into view so as not to be occluded by the top bar according to the 30px padding. This is what happens if you call scrollIntoView on the textbox.

Expected results:

Instead, the textbox is only scrolled in to the edge of the viewport where it is not visible.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Screenshot-Firefox Nightly (2021-03-29).png

Robert, thanks for file the bug.

Did you accidentally swap the actual result and expected result in comment 0? This screenshot captured my test result on Firefox Nightly on Linux after step 4 (I click on the "screen into view" button). Chrome has the same behavior where the <input> is just below the "Reserved space".

Comment 3

[Robert Flack]

The scroll into view button is to compare the behavior to the scrollIntoView API. The incorrect behavior is when you focus the textbox, scroll it out of view and then type characters into it while it is scrolled out of view.

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Thanks! I misunderstand step 4. It is actually typing any character in the <input> to bring it into the view. I can reproduce this bug.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Standalone testcase

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1701928 - Selection scrolling should not ignore scroll-{margin,padding}. r=#layout-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3d209ba46c38
Selection scrolling should not ignore scroll-{margin,padding}. r=hiro,masayuki

Comment 8

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/28352 for changes under testing/web-platform/tests

Comment 9

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/3d209ba46c38

Comment 10

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: screenshot_1701928

Hello! Reproduced the initial issue with Firefox 89.0a1 (20210330215136) on Windows 10x64 and attached test case.
The text box is no longer displayed under the reserved space banner with Firefox 89.0b3 (20210422190146) on Windows 10x64, macOS 11.2.3 and Ubuntu 20 but it seems that it still covered a little by it. Is this expected? Thank you in advance.

Comment 11

[Robert Flack]

I believe this is expected as the thing being scrolled into view is the text currently being entered in the input, not the entire textbox. E.g. in a textarea this would only scroll the current line into view not the whole textarea.

You should see the same behavior in a case without any scroll padding - the top of the textbox will likely be above the scrollport.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Yes, exactly. Thanks Robert :)

Comment 13

[Alexandru Trif, Desktop QA [:atrif]]

Thank you both for the clarification! Closing this.

Comment 14

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by jgraham