Bug 288795 – [iOS] View Transitions interrupt scroll momentum

• Component: Layout and Rendering
• Status: NEW

[Sebastian Markbåge]

When 

https://repro-view-transition-scroll-bug.vercel.app

[Sebastian Markbåge]

On iOS, when you start a View Transition it interrupts the currently running scroll if it's inside the transitioning boundary. It keeps responding to touches though. Once it has started and you release the touch .

On desktop, with wheel scroll you can start scrolling and keeping scrolling while the View Transition is going. On Chrome it also works with touches, if you start scrolling with touch it keeps being scrollable even if you start a View Transition. That's how it's expected to work on iOS too.

[Sebastian Markbåge]

The example on https://repro-view-transition-scroll-bug.vercel.app might be a bit confusing since it also takes a snapshot which freezes as expected. However, the content fading in should be live and respond to the scroll.

If you release the touch and then touch again it now starts scrolling again even while the View Transition is going. So I suspect it's just something that causes it to be stopped by starting the View Transition that's the bug.

[Radar WebKit Bug Importer]

<rdar://problem/145869869>

[Tim Nguyen (:ntim)]

Could you post a screen recording of the bug? I see the same behavior in ToT WebKit and Chrome on macOS.

[Sebastian Markbåge]

Created attachment 474445 [details]
Desktop Safari works

This is using touch pad two finger scroll.

It's hard to tell if this is actually broken or not because there's no "scrollend" event so it's hard to tell if it stops or restarts.

[Sebastian Markbåge]

Created attachment 474446 [details]
iOS Safari with Touch Doesn't work

Note how I press down and swipe to start but then it stops before my finger lifts.

After I lift the finger and press down again it can now restart and the second time it works because the View Transition has already started.

(Note that with iPhone mirroring it's not in touch mode and so behaves like Safari desktop.)

[Sebastian Markbåge]

Created attachment 474447 [details]
Chrome Desktop with Mobile Touch Simulator enabled

Note that in Chrome on MacOS with touch events simulated. I just press down once. It's not visible in the video but my finger is down and up only once the whole time. It never gets interrupted.

[Sebastian Markbåge]

The reason this is so important is because without it, you can't have a swipe implemented as a scroll drive a View Transition. Such as swiping between two pages. Because you'd have to have a View Transition started before you even knew the finger was going to press down but you can't have View Transitions "always on" since it's only one at a time an it would block other interactions. So it's important to start the View Transition at the same time as the swipe.

[Sebastian Markbåge]

For anyone following along we had a side-discussion on GitHub as well. https://github.com/facebook/react/pull/32656#issuecomment-2733906601

[Tim Nguyen (:ntim)]

Created attachment 474670 [details]
Repro with opacity: 0; on VT

Just uploading another version of the repro with opacity: 0; set on the VT because the snapshot fading makes it quite confusing

[Tim Nguyen (:ntim)]

Created attachment 474671 [details]
Repro without VT fade

[Tim Nguyen (:ntim)]

Created attachment 474672 [details]
Repro without VT fade and 60s VT

[Sebastian Markbåge]

Any progress on this? Tbh, I'm considering abandoning View Transitions in React and reimplementing it with custom Animations instead because of this seemingly small bug. Because it really just kills so many use cases.