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.
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
I created a video demonstrating this bug, as well: https://photos.app.goo.gl/oWSZJDwvG1yADqxr6
<rdar://problem/79247949>
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.