226689 2021-06-05 17:08:59 -0700 visualViewport.height changes and resize events fired when viewport height is not changing 2023-08-28 11:55:19 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 iPhone / iPad iOS 14 NEW InRadar P2 Normal --- 1 john.crim webkit-unassigned bfulgham simon.fraser webkit-bug-importer wenson_hsieh zalan oldest_to_newest 1767165 0 john.crim 2021-06-05 17:08:59 -0700 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. 1767225 1 john.crim 2021-06-06 11:04:30 -0700 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 1767487 2 john.crim 2021-06-07 10:15:02 -0700 I created a video demonstrating this bug, as well: https://photos.app.goo.gl/oWSZJDwvG1yADqxr6 1769229 3 webkit-bug-importer 2021-06-12 17:09:19 -0700 <rdar://problem/79247949> 1973987 4 john.crim 2023-08-28 11:55:19 -0700 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.