Bug 226689 – visualViewport.height changes and resize events fired when viewport height is not changing

• Status: NEW
• Component: Layout and Rendering

[John Crim]

On iOS and iPadOS, using Safari 14 on iOS 14:

After scrolling to the bottom of the page with the on-screen keyboard displayed, while scrolling up with ones finger kept on the screen, visualViewport.height increases with scrolling while there is no change to the actual viewport height; and, many visualViewport.resize events are raised while they should not be.

This bug does not occur:
* When the on-screen keyboard is not displayed
* When scrolling down
* After the finger is removed from the screen, while scrolling up

I've create a test page which shows it clearly:

https://cdpn.io/jcrim/debug/JjWvMEo/RBAOJRxOZjnr

You can view the test page source code or edit it here:

https://codepen.io/jcrim/pen/JjWvMEo

Repro steps (on iOS or iPadOS) :
# Click on a text input to make the on-screen keyboard appear
# Scroll down to bottom of viewport
# While scrolling up from bottom of viewport, leave finger on screen (while slowly dragging down to scroll). View `visualViewport.height` and resize events to see bug.
# After releasing finger from scrolling up, notice that `visualViewport.height` changes to the correct value (matching the actual height of the layout viewport).

*The Bug* is that visualViewport resize events are occurring, and the visualViewport.height value is increasing while dragging, even though the height of the viewport is the same size.

*Expected behavior:* visualViewport.height does not increase, and visualViewport.resize events are not raised, when the actual viewport is not changing size.

[John Crim]

It looks like the first codepen link doesn't last, so please use this link to view the bug instead (it's easier than messing with codepen, particularly on mobile devices):

https://johncrim.github.io/bug-safari-vvp-scroll/

Source code is here:

https://github.com/johncrim/bug-safari-vvp-scroll

[John Crim]

I created a video demonstrating this bug, as well:

https://photos.app.goo.gl/oWSZJDwvG1yADqxr6

[Radar WebKit Bug Importer]

<rdar://problem/79247949>

[John Crim]

This issue still exists in Safari on iPadOS 16.6.

Note also that when this bug is happening (scrolling up from bottom with on-screen keyboard active), not only does the `visualViewport.height` continue to grow, but `window.innerHeight` returns the same value as `visualViewport.height`.  This is clearly wrong, because the on-screen keyboard is showing, so the visualViewport height is the height of the keyboard shorter than `window.innerHeight`. I can take another video of this behavior if it helps.

When I stop dragging + scrolling up, the values return to expected values.