169509 2017-03-11 00:32:04 -0800 If a scrollable layer is at its end position and user tries to scroll it with a down-scroll gesture, it will not scroll 2025-01-15 09:54:06 -0800 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified All NEW InRadar P2 Normal --- 1 noam webkit-unassigned allllllx augus.dupin bbmarelyo bfulgham dave.normington hello+webkitorg hi ik paulo.sousa pm santeri.kaariainen simon.fraser tobi webkit-bug-importer wenson_hsieh zalan oldest_to_newest 1286104 0 304142 noam 2017-03-11 00:32:04 -0800 Created attachment 304142 Simple HTML file reproducing the bug To reproduce: - Open the attachment in safari on Mac (nightly, releases, anything) - Scroll the DIV to the end - Wait 1-2 seconds until the scrollbars disappears - Try to scroll by first moving the two fingers downwards and then upwards - works. - Wait 1-2 more seconds until the scrollbars disappears - Try to scroll by first moving the two fingers upwards and then upwards - page will scroll instead of the scroll layer. Seems like the code is set up so that when the beginning gesture is "dead end" it will not bind the touch scrolling to the layer at all. 1286141 1 simon.fraser 2017-03-11 08:44:26 -0800 A scroll latching issue. 1286681 2 noam 2017-03-11 10:48:17 -0800 @smfr Exactly, seems like ScrollAnimator::handleWheelEvent returns false when you start scrolling in the wrong direction, and then assigns the frame to stopElement. Maybe in a case like this one (where scroll is possible in the opposite direction) ScrollAnimator and friends should return true but not actually scroll, or alternatively return a value that would signal EventHandler to not latch? 1286789 3 noam 2017-03-11 10:52:23 -0800 We've encountered this on several occasions and the workaround do is to listen to onScroll and set the scrollTop to always be either 1 or (end of scroll - 1). I wonder if more people are doing this on the web as a workaround for this issue... I think I saw some that kind of code in JS frameworks. 1348403 4 webkit-bug-importer 2017-09-13 11:37:12 -0700 <rdar://problem/34415267> 1486625 5 356972 hi 2018-12-10 10:59:28 -0800 Created attachment 356972 Hack to enable "overscroll-behavior: contain" style behavior The test case attached shows a "workaround" for this, even if it has the quirk of what some folks know as "scroll-rails" (courtesy of ms/ie) on latching horizontal scroll gestures, locking up vertical scrolling until the test cases "hidden" horizontal scroll container animates to a stop. It shows the only non-javascript way to fix webkits lack of an "overscroll-behavior" property (Or even if your work on the css side of pointerEvents would make use of the "touch-action" property?). But requires quite a few extra elements/pseudos, an extra scroll container, and the use of quite constrained sticky positioning. I think what noam@webkit.org is referring to for javascript "1px short of scroll boundaries" would be things like https://github.com/ecto/ripstop. And I know there are many articles out there about this, especially attempting to work around modals like https://benfrain.com/preventing-body-scroll-for-modals-in-ios/ when iOS fixed positioning still enables scroll chaining unlike most desktop environments. I haven't wanted to share this with any other devs for fear of such a messy hack becoming used all over, but figured I'd share here, even while I use less reduced versions of this hack in production myself. If anything, could I get a response from anyone (maybe fred.wang@free.fr?) in the know about how/if your implementation of "overscroll-behavior" (https://bugs.webkit.org/show_bug.cgi?id=176454) will relate to this issue??? 1486627 6 simon.fraser 2018-12-10 11:04:57 -0800 The latching logic is incorrect. 1486628 7 hi 2018-12-10 11:08:23 -0800 Also, my last comment and test case is about iOS Safari, not desktop, that may not have been at all clear. 1486629 8 hi 2018-12-10 11:10:29 -0800 simon.fraser@apple.com my thoughts about rails/latching??? Or your comment from 2017-03-11? 1524683 9 pm 2019-04-05 06:36:57 -0700 As PWA's become more prevalent and safari looks to support them perhaps this should be re-prioritised. It is common for single page applications to have fixed areas to mimic native applications look and feel using scrollable layers for content between the fixed areas. If going past the boundaries of the scrollable area starting at a boundary as described by Noam the scroll moves to the parent elements of the page. It becomes unresponsive until the hidden scroll bounces back. 1575306 10 tobi 2019-09-30 13:24:07 -0700 It would be great if this could get fixed. 1954308 11 santeri.kaariainen 2023-05-10 05:57:19 -0700 Hello, any updates on this? 2087058 12 dave.normington 2025-01-14 08:05:15 -0800 Our users are experiencing this issue with ag-grid while in PWA standalone mode. We serve our internal webapp to users as a PWA and found this issue is present but not there when accessing the webapp directly via URL. It does seem that the ripstop fix does solve the issue but obviously would like it to be solved at the root. Is anyone interested in looking at this? Is there another way for this to get prioritised? Thanks for your help 2087177 13 simon.fraser 2025-01-14 13:04:35 -0800 Dave, are you seeing this on macOS or iOS? 2087409 14 dave.normington 2025-01-15 04:06:21 -0800 On iPadOS thanks Simon 2087492 15 simon.fraser 2025-01-15 09:54:06 -0800 I think that's a different issue. 304142 2017-03-11 00:32:04 -0800 2018-12-10 11:03:59 -0800 Simple HTML file reproducing the bug file_169509.txt text/html 443 noam PGJvZHk+DQoJPGhlYWQ+DQoJCTxzdHlsZT4NCgkJCSNvdXRlciB7DQoJCQkJaGVpZ2h0OiAyMDBw eDsNCgkJCQl3aWR0aDogMjAwcHg7DQoJCQkJb3ZlcmZsb3c6IHNjcm9sbDsNCgkJCX0NCg0KCQkJ I2lubmVyIHsNCgkJCQloZWlnaHQ6IDQwMHB4Ow0KCQkJfQ0KDQoJCQkjaW5uZXIgRElWIHsNCgkJ CQloZWlnaHQ6IDUwJTsNCgkJCQl3aWR0aDogMTAwJTsNCgkJCX0NCg0KCQkJLnllbGxvdyB7DQoJ CQkJYmFja2dyb3VuZDogeWVsbG93Ow0KCQkJfQ0KCQkJLnJlZCB7DQoJCQkJYmFja2dyb3VuZDog cmVkOw0KCQkJfQ0KCQk8L3N0eWxlPg0KCTwvaGVhZD4NCgk8ZGl2IGlkPSJvdXRlciI+DQoJCTxk aXYgaWQ9ImlubmVyIj4NCgkJCTxkaXYgY2xhc3M9InJlZCI+PC9kaXY+DQoJCQk8ZGl2IGNsYXNz PSJ5ZWxsb3ciPjwvZGl2Pg0KCQk8L2Rpdj4NCgk8L2Rpdj4NCjwvYm9keT4= 356972 2018-12-10 10:59:28 -0800 2018-12-10 10:59:28 -0800 Hack to enable "overscroll-behavior: contain" style behavior testcase.html text/html 2187 hi PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBuYW1lPSJkZXNjcmlwdGlvbiIg Y29udGVudD0idGVzdGNhc2UiIC8+CiAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9Imlu aXRpYWwtc2NhbGU9MSwgd2lkdGg9ZGV2aWNlLXdpZHRoLCBtYXhpbXVtLXNjYWxlPTEuMCwgdXNl ci1zY2FsYWJsZT1ubyI+CiAgPG1ldGEgbmFtZT0iYXBwbGUtbW9iaWxlLXdlYi1hcHAtY2FwYWJs ZSIgY29udGVudD0ieWVzIj4KICA8dGl0bGU+dGVzdGNhc2U8L3RpdGxlPgogIDxzdHlsZT4KICAg IDpyb290IHsKICAgICAgLS1ndXQ6IDI1cHg7CiAgICAgIC0tYnVmZjogNzVweDsKICAgIH0KICAg IGh0bWwgewogICAgICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IG5vbmU7CiAgICB9CiAgICBo dG1sLAogICAgYm9keSB7CiAgICAgIG92ZXJmbG93OiBoaWRkZW47CiAgICB9CiAgICAKICAgIC53 cmFwIHsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICB0b3A6IHZhcigtLWJ1ZmYpOwog ICAgICBsZWZ0OiB2YXIoLS1idWZmKTsKICAgICAgcmlnaHQ6IHZhcigtLWJ1ZmYpOwogICAgICBo ZWlnaHQ6IGNhbGMoNzV2aCAtIHZhcigtLWJ1ZmYpKTsKICAgICAgCiAgICAgIG92ZXJmbG93OiBo aWRkZW47CiAgICAgIG92ZXJmbG93OiB2aXNpYmxlOwogICAgfQogICAgLm91dCB7CiAgICAgIHdp ZHRoOiBjYWxjKDEwMCUgKyAoMiAqIHZhcigtLWJ1ZmYpKSk7CiAgICAgIHBvc2l0aW9uOiByZWxh dGl2ZTsKICAgICAgbGVmdDogY2FsYygtMSAqIHZhcigtLWJ1ZmYpKTsKICAgICAgaGVpZ2h0OiBj YWxjKDEwMCUgKyB2YXIoLS1ndXQpKTsKICAgICAgCiAgICAgIG92ZXJmbG93LXg6IHNjcm9sbDsK ICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoOwogICAgfQogICAgLmluIHsK ICAgICAgLS1zbGl2ZXI6IDFweDsKICAgICAgLS1zbGl2ZXI6IDVweDsKICAgICAgd2lkdGg6IGNh bGMoMTAwJSArIHZhcigtLXNsaXZlcikpOwogICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtIHZhcigt LWd1dCkpOwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgfQogICAgLmluOjpiZWZvcmUsCiAgICAu aW46OmFmdGVyIHsKICAgICAgY29udGVudDogJyc7CiAgICAgIGRpc3BsYXk6IGJsb2NrOwogICAg ICB3aWR0aDogdmFyKC0tYnVmZik7CiAgICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LDAs MCwuMSk7CiAgICB9CiAgICAuZml4ZXIgewogICAgICBwb3NpdGlvbjogLXdlYmtpdC1zdGlja3k7 CiAgICAgIHBvc2l0aW9uOiBzdGlja3k7CiAgICAgIGxlZnQ6IHZhcigtLWJ1ZmYpOwogICAgICBy aWdodDogdmFyKC0tYnVmZik7CiAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAoMiAqIHZhcigtLWJ1 ZmYpKSAtIHZhcigtLXNsaXZlcikpOwogICAgICBvdmVyZmxvdy15OiBzY3JvbGw7CiAgICAgIC13 ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDsKICAgICAgCiAgICAgIAogICAgICBiYWNr Z3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwwLDAsLjUpOwogICAgfQogICAgLndlbGwgewogICAgICBt aW4taGVpZ2h0OiBjYWxjKDEwMCUgKyA1cHgpOwogICAgICBkaXNwbGF5OiBibG9jazsKICAgIH0K ICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxkaXYgY2xhc3M9IndyYXAiPgogICAgPGRpdiBj bGFzcz0ib3V0Ij4KICAgICAgPGRpdiBjbGFzcz0iaW4iPgogICAgICAgIDxkaXYgY2xhc3M9ImZp eGVyIj4KICAgICAgICAgIDxkaXYgY2xhc3M9IndlbGwiPlNjcm9sbCBtZSB1cCBhbmQgZG93biwg ZXZlbiB3aGlsZSBhbHJlYWR5IHJlc3RpbmcgYXQgc2Nyb2xsIGJvdW5kYXJpZXMgYW5kIHNlZSBt ZSBuZXZlciBjaGFpbiBzY3JvbGxpbmcgdXAgdG8gdGhlIHZpZXdwb3J0LiBJZiB5b3Ugc2Nyb2xs IGhvcml6b250YWxseSwgeW91J2xsIHNlZSB0aGUgdHJpY2sgaXMgdGhhdCB0aGlzIHZlcnRpY2Fs IHNjcm9sbGVyIGlzIG5lc3RlZCBpbiBhIGhvcml6b250YWwgc2Nyb2xsZXIgdGhhdCBqdXN0IGJh cmVseSBvdmVyZmxvd3MgYW5kIGhhcyBzcGFjZXJzIGFyb3VuZCBhIHN0aWNreSBwb3NpdGlvbmVk IGVsZW1lbnQgdGhhdCBwcm92aWRlcyB0aGUgZXZlbnR1YWwgdmVydGljYWwgc2Nyb2xsIGNvbnRh aW5lci48L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2Rp dj4KICAKPC9ib2R5Pgo8L2h0bWw+