Bug 271829 – Unexpected shift of layout viewport of a webpage on input focus

• Status: NEW
• Component: Compositing

[Max Sinev]

Created attachment 470637 [details]
Video with the bug (Method 1)

After several page interactions, focusing on the input leads to autoscrolling, which breaks the page layout by introducing empty space at the top. Additionally, this bug extends to affect the entire browser tab: for instance, clearing the omnibox and navigating to google.com/search triggers the bug upon clicking the Google search input.

Conditions:

- iOS 16+ (iOS version used for reproduction: 16.6 (20G75))
- Input positioned at the top of the page
- Input blurs upon touch movement
- The page should have sufficient scrollable content


Steps to Reproduce (Method 1):
1. Focus on the input field.
2. Initiate a touch action in the middle of the page.
3. Scroll down the page using touch movements until the browser omnibox collapses to a small line displaying the page address.
4. Scroll up the page using touch movements.
5. Refocus on the input field.
(Note: These steps must be executed rapidly and may require several attempts. A video demonstrating attempts is attached.)


Steps to Reproduce (Method 2) (Simplified):
1. Focus on the input field.
2. Scroll down with one touch until the page loader appears at the top (without reloading the page).
3. Touch the screen with a second finger and scroll down slightly.
4. Release both fingers.
5. Refocus on the input field.

Expected Behavior: The input field should be focused, and it should remain at the top of the page (as seen in Step 1).
Actual Behavior: The input field is focused but shifts downward, because of empty space at the top of the page. And looks like this empty space is a "native" thing and is out of DOM layout.

A tiny example webpage where the bug can be reproduced. https://codesandbox.io/embed/safari-test-lzljnc?file=%2Findex.html

[Radar WebKit Bug Importer]

<rdar://problem/125577284>