Bug 218465 - iOS VisualViewport scroll events fire only when scrolling finishes
Summary: iOS VisualViewport scroll events fire only when scrolling finishes
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad Other
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-11-02 15:53 PST by Darryl Pogue
Modified: 2022-03-31 19:24 PDT (History)
6 users (show)

See Also:


Attachments
iOS Test Case (16.35 KB, application/zip)
2021-05-31 20:06 PDT, Darryl Pogue
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Darryl Pogue 2020-11-02 15:53:54 PST
WKWebView on iOS dispatches scroll events on the scrollingElement as it is scrolling, which allow animations and element positioning to be updated as the scroll happens.

The visualViewport seems to only dispatch scroll events when the scrolling has come to a stop, even when using passive event listeners. When using visualViewport to adjust elements on screen to avoid the iOS keyboard overlay, this results in janky updates to element position.
Comment 1 Darryl Pogue 2020-11-02 15:59:53 PST
Test case: https://jsfiddle.net/5kgxab17/
Comment 2 Radar WebKit Bug Importer 2020-11-04 12:07:15 PST
<rdar://problem/71046513>
Comment 3 Simon Fraser (smfr) 2021-05-27 11:53:54 PDT
I'm not sure how to interpret the tescase. Darryl, could you make it clearer?
Comment 4 Simon Fraser (smfr) 2021-05-27 13:36:17 PDT
The VisualViewport only fires 'scroll' events when the visual viewport changes relative to the layout viewport. That only happens when zoomed, and possibly when some resizing because of the keyboard happen.
Comment 5 Darryl Pogue 2021-05-31 20:06:11 PDT
Created attachment 430226 [details]
iOS Test Case

(In reply to Simon Fraser (smfr) from comment #3)
> I'm not sure how to interpret the tescase. Darryl, could you make it clearer?

Hi Simon, I've put together a clearer test case for iOS that demonstrates the problem.

GitHub: https://github.com/dpogue/webkit-bug-218465-testcase
Source with Xcode project also attached as a zip file.
Comment 6 Peter Wiebe 2022-03-31 19:24:12 PDT
If you compare the values of window.scrollY and window.visualViewport.offsetTop in an window.onscroll event handler the offsetTop values typically do not update until after the scroll motion completes, whereas the window.scrollY values update continuously throughout the scrolling motion. 

This makes the scroll event handler much less useful and work in an unexpected way.