Bug 245722 - Smooth scroll in viewport with scroll-snap fails on iOS
Summary: Smooth scroll in viewport with scroll-snap fails on iOS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 16
Hardware: iPhone / iPad iOS 16
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-09-27 03:09 PDT by Johannes Odland
Modified: 2024-04-03 02:48 PDT (History)
4 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Johannes Odland 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.
Comment 1 Radar WebKit Bug Importer 2022-10-03 11:46:34 PDT
<rdar://problem/100727098>
Comment 2 Smoley 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?
Comment 3 Johannes Odland 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.
Comment 4 Johannes Odland 2022-12-15 22:34:03 PST
Bug is still there in Safari 16.2
Comment 5 Johannes Odland 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.
Comment 6 Johannes Odland 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
Comment 7 Simon Fraser (smfr) 2023-01-25 15:31:50 PST
Created attachment 464658 [details]
Test
Comment 8 Simon Fraser (smfr) 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.
Comment 9 Johannes Odland 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().
Comment 10 Johannes Odland 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?
Comment 11 Johannes Odland 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
Comment 12 Johannes Odland 2023-05-22 00:02:33 PDT
Retested on iOS Safari 16.5: still failing
Comment 13 Johannes Odland 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.
Comment 14 Johannes Odland 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.