Summary: | Incorrect scroll position reported | ||
---|---|---|---|
Product: | WebKit | Reporter: | Jack Doyle <jack> |
Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW --- | ||
Severity: | Major | CC: | simon.fraser, webkit-bug-importer |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari 15 | ||
Hardware: | iPhone / iPad | ||
OS: | iOS 15 |
Description
Jack Doyle
2022-10-04 16:19:36 PDT
It's currently not possible to position an element in JavaScript in a way that is frame-accurate with user scrolling. Scrolling on iOS is always asynchronous. Dang! Okay, "currently not possible..." does that mean that may change sometime soon? [fingers crossed] And can you think of any out-of-the-box strategies to somehow make this work? The only way would be to use position:fixed or position:sticky. Can you hoist your fixed thing outside the transformed ancestor? Unfortunately, no, that isn't possible. We don't have control over the markup/structure. There aren't any tricks to getting scroll to be synchronous? I attempted to preventDefault() on touchmove events and handle the scrolling via JavaScript which should totally work in theory, but there's a nasty bug in iOS Safari since 2018 (from what I can tell) that makes it impossible because the event.clientY/X are incorrectly reported, as illustrated in one of my demos provided: https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503 That bug report is here: https://bugs.webkit.org/show_bug.cgi?id=181954 I tried bumping it months ago and got no answer. So I have no way of figuring out where the user's finger actually is in the viewport (reliably) when scroll is involved. Or am I missing something? |