Bug 218465

Summary:

iOS VisualViewport scroll events fire only when scrolling finishes

Product:

WebKit

Reporter:

Darryl Pogue <dvpdiner2>

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

cdumez, pjwiebe, simon.fraser, smoley, stephen, thorton, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

iPhone / iPad

OS:

Other

See Also:

https://bugs.webkit.org/show_bug.cgi?id=226354

Attachments:

Description	Flags
iOS Test Case	none

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.

Comment 7 Darryl Pogue 2024-06-04 23:20:42 PDT

Pull request: https://github.com/WebKit/WebKit/pull/29531