| Summary: | Provide a way to set the same scroll inertia for "-webkit-overflow-scrolling: touch" | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dima Voytenko <dvoytenko> | ||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED FIXED | ||||||||
| Severity: | Normal | CC: | dbates, fred.wang, jonlee, simon.fraser, thorton, webkit-bug-importer | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 10 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 10 | ||||||||
| Attachments: |
|
||||||||
Resolved via https://trac.webkit.org/changeset/211197/webkit, which makes WKWebView have the same scroll deceleration as -webkit-overflow-scrolling: touch Created attachment 307979 [details]
Testcase: Scroll inertia of the viewport
Created attachment 307980 [details]
Testcase: Scroll inertia of an element
Thanks a lot for fixing this! One thing I wanted to confirm. From the fix description it sounds like the scroll inertia in the WKWebView will now be the same as for an element with `-webkit-overflow-scrolling: touch`, right? Does this mean that Safari will eventually have the same scroll inertia as well? |
To make an element scrollable in CSS, currently the following has to be done: ``` .scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } ``` The WebKit-only `-webkit-overflow-scrolling: touch` adds momentum scrolling. However, the scroll inertia is drastically different from the native scroll on `<html>` element. Since it's a WebKit-specific issue, could you please add another CSS property to use the native-like inertia for bigger scrollable elements?