Bug 280703 – Cross-Document View Transitions buggy on https://view-transitions.netlify.app/stack-navigator/mpa/ demo

• Component: Animations
• Status: RESOLVED FIXED

[Nick Coury]

Reference: https://view-transitions.netlify.app/stack-navigator/mpa/

Demo works fine on Chrome 129. Very buggy on Safari Technology Preview 204.

Forward navigations don't play the expected transitions, just cross-fading. Clicks on the destination page are broken. Mouse pointer changes on hover as expected, but clicking the back button is broken. Using browser back/forward buttons works but also doesn't play the expected animations.

Chrome 129: https://photos.app.goo.gl/JyenwhsiepiyykZD9

Safari Tech Preview 204: https://photos.app.goo.gl/NdGUEEYL2CkMZnZM9

[Bramus]

I also noticed the page becomes unresponsive after using the UA back/forward buttons. Only after a refresh the page becomes responsive again.

[Radar WebKit Bug Importer]

<rdar://problem/137081148>

[Anthony Ricaud]

Some of the issues are related to the demo using the Navigation API and Safari TP not supporting it yet.

[Bramus]

I have rewritten the linked to demo so that it does not rely on the Navigation API. The demo still shows the behavior as described in #c1: upon using the UA’s back/forward buttons, the page becomes unresponsive to pointer input.

The same applies to https://view-transitions.netlify.app/pagination/mpa/, for which I am attaching a recording.

[Bramus]

Created attachment 472768 [details]
Recording of https://view-transitions.netlify.app/pagination/mpa/ in STP204

[Matt Woodrow]

It looks like one issue is that https://view-transitions.netlify.app/stack-navigator/mpa/ redirects to https://view-transitions.chrome.dev/stack-navigator/mpa/

That sets the 'was created via cross-origin redirects' bit on the Document.

When we move forward to a sub-page, and then back again to the root, that second load comes from BFCache and the existing Document is re-used. This prevents the view transition from being allowed :(

If you load https://view-transitions.chrome.dev/stack-navigator/mpa/ directly, then it works better.

There's definitely some other bad issues with rendering suppression + BFCache, that I'll fix here.

[Bramus]

> It looks like one issue is that https://view-transitions.netlify.app/stack-navigator/mpa/ redirects to https://view-transitions.chrome.dev/stack-navigator/mpa/
> 
> That sets the 'was created via cross-origin redirects' bit on the Document.

Yeah sorry about that … we recently moved all the demos to a new origin. Please use https://view-transitions.chrome.dev/stack-navigator/mpa/ where the netlify.app variant was mentioned.

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/35556

[Matt Woodrow]

(In reply to Bramus from comment #7)
> 
> Yeah sorry about that … we recently moved all the demos to a new origin.
> Please use https://view-transitions.chrome.dev/stack-navigator/mpa/ where
> the netlify.app variant was mentioned.

No worries, was just a surprise to me that this then affected transitions within the site.

The same doesn't appear to be true for Chrome, so I've filed https://github.com/w3c/csswg-drafts/issues/11063 to try sort it out. Might be a spec interpretation issue on my end.

[EWS]

Committed 285582@main (d9d731244a37): <https://commits.webkit.org/285582@main>

Reviewed commits have been landed. Closing PR #35556 and removing active labels.

[EWS]

Committed 283286.373@safari-7620-branch (b9b40ee86fb6): <https://commits.webkit.org/283286.373@safari-7620-branch>

Reviewed commits have been landed. Closing PR #2129 and removing active labels.

[Matt Woodrow]

*** Bug 282507 has been marked as a duplicate of this bug. ***