Bug 245722

Summary: Smooth scroll in viewport with scroll-snap fails on iOS
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: agafvv, johannes.odland, nmouchtaris, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
See Also: https://bugs.webkit.org/show_bug.cgi?id=239063
https://bugs.webkit.org/show_bug.cgi?id=251003
https://bugs.webkit.org/show_bug.cgi?id=253056
https://bugs.webkit.org/show_bug.cgi?id=255592
https://bugs.webkit.org/show_bug.cgi?id=255593
https://bugs.webkit.org/show_bug.cgi?id=272079
https://bugs.webkit.org/show_bug.cgi?id=283707
Attachments:
Description Flags
Video of the test on iOS 16
none
Video of bug in iOS Safari 16.3
none
Test none

Johannes Odland
Reported 2022-09-27 03:09:58 PDT
Created attachment 462654 [details] Video of the test on iOS 16 This bug is a related to https://bugs.webkit.org/show_bug.cgi?id=239063 that was fixed this summer. It can be triggered on the same test with a slightly different procedure: element.scrollIntoView() does not work when using `scroll-snap-type: y mandatory` on `:root` in iOS when browser chrome is hidden. How to replicate: 1. Open debug view of https://codepen.io/johannesodland/pen/PoEaMWO on iOS Safari 16 2. Click `next` to trigger scrollIntoView (it scrolls to the second section) 3. Click `previous` to trigger scrollIntoView (it scrolls to the first section) 4. Scroll manually to the second section so that url bar / browser chrome is hidden. 5. Click `previous` Expected result: The first section should scroll into view Result on iOS Safari: Nothing happens. Other browsers and desktop safari works as expected.
Attachments
Video of the test on iOS 16 (491.12 KB, video/mp4)
2022-09-27 03:09 PDT, Johannes Odland 		no flags
Details
Video of bug in iOS Safari 16.3 (1.30 MB, video/quicktime)
2023-01-24 06:24 PST, Johannes Odland 		no flags
Details
Test (951 bytes, text/html)
2023-01-25 15:31 PST, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-10-03 11:46:34 PDT
<rdar://problem/100727098>
Smoley
Comment 2 2022-10-14 12:42:25 PDT
Thanks for filing, I've not been able to reproduce this on the latest iOS 16.1 beta (Beta 5 20B5072b). Are still seeing this issue on that build?
Johannes Odland
Comment 3 2022-11-08 00:30:23 PST
(In reply to Smoley from comment #2) > Thanks for filing, I've not been able to reproduce this on the latest iOS > 16.1 beta (Beta 5 20B5072b). Are still seeing this issue on that build? Not able to test it on beta builds, but the bug is still there in 16.1.
Johannes Odland
Comment 4 2022-12-15 22:34:03 PST
Bug is still there in Safari 16.2
Johannes Odland
Comment 5 2023-01-24 04:57:36 PST
Changing title as the bug does not occur in iframes, it occurs when there is scroll-snapping in the main viewport. eg: ```css html { scroll-snap-type: y mandatory; } .some-element { scroll-snap-align: top; } ``` ```js { document.querySelector('.some-element').scrollIntoView({ behavior: "smooth" }) // Fails } See https://codepen.io/johannesodland/pen/PoEaMWO and the attached video. The code-pen must be tested in "debug mode" and not in "edit mode" as it can not be reproduced inside the iframe there.
Johannes Odland
Comment 6 2023-01-24 06:24:06 PST
Created attachment 464629 [details] Video of bug in iOS Safari 16.3 scrollIntoView still fails in iOS Safari 16.3. It stops working after the browser navigation interface has retracted due to a user scroll. This is similar to the bugs we see with VoiceOver navigation in https://bugs.webkit.org/show_bug.cgi?id=250999 and https://bugs.webkit.org/show_bug.cgi?id=251003
Simon Fraser (smfr)
Comment 7 2023-01-25 15:31:50 PST
Created attachment 464658 [details] Test
Simon Fraser (smfr)
Comment 8 2023-01-25 17:03:36 PST
In working and non-working cases we call PageClientImpl::requestScroll() which starts the animated scroll. But in the bad case, when the Safari UI is collapsed, we immediately call `_updateVisibleContentRects()` to push an update to the web process, and this runs code that re-snaps to the snap point closest to the current scroll position, which kills the animation. We need to re-think when `_updateVisibleContentRects()` should trigger snapping.
Johannes Odland
Comment 9 2023-01-25 22:40:05 PST
Could this be the cause of https://bugs.webkit.org/show_bug.cgi?id=251003 as well? It's a similar bug, but triggered by VoiceOver navigation and not scrollIntoView().
Johannes Odland
Comment 10 2023-03-20 23:27:36 PDT
Thank you for looking into these issues Simon. Do you know if there are any plans to address it in the upcoming 16.4 release?
Johannes Odland
Comment 11 2023-03-27 22:37:09 PDT
I have retested on iOS 16.4 and can confirm that the issue still persists. Element.scrollIntoView({behavior: 'smooth'} fails after the browser interface has been retracted. I have copied the test case to a new location for easier testing. Here is the URL: https://johannesodland.github.io/browserbugs/safari-scroll-snap-scroll-into-view-issue.html
Johannes Odland
Comment 12 2023-05-22 00:02:33 PDT
Retested on iOS Safari 16.5: still failing
Johannes Odland
Comment 13 2023-09-19 09:18:04 PDT
Retested on iOS 17 Still fails. Programmatic scrolling is still unreliable with scroll snapping on the root/viewport.
Johannes Odland
Comment 14 2024-03-07 12:23:45 PST
Retested on iOS 17.4. The browser smooth-scrolls to the first section, but then immediately snaps back to the previous snap position.
Johannes Odland
Comment 15 2024-11-19 10:00:55 PST
Retested on iOS 18.1. Still failing.
Johannes Odland
Comment 16 2025-06-10 22:47:31 PDT
Retested on iOS 26 beta. Still failing 😞
Johannes Odland
Comment 17 2025-09-23 22:49:10 PDT
Seems to be fixed on iOS 26.
Note You need to log in before you can comment on or make changes to this bug.