Detect UA transitions on same-origin cross-document navigations
Opened this issue · 4 comments
What problem are you trying to solve?
In short:
Same as #8782 but then for same-origin cross-document navigations.
A bit longer:
Both Safari iOS and Safari Desktop (and soon Chrome on Android) have a feature where you see a 'preview' of the previous history entry when you drag from the edge (iOS) or two-finger swipe (Desktop). When doing so, the UA runs its own transition form one page to another.
When authors have added View Transitions to their website, this will result in two transitions running in sequence: one provided by the UA and one code by the author.
If authors had a way to detect whether the UA was running it’s own transition, then they can use that to skip their own transition.
What solutions exist today?
None.
(One could rebuild their webapp to use the Navigation API, but I don’t consider that a low-effort solution)
How would you solve it?
Add a hasUAVisualTransition property to NavigationActivation. This would allow developers to skip their own transition from within PageSwap/PageReveal.
Anything else?
The hasUAVisualTransition property is already a thing, which was introduce to solve this very same problem for same-document navigations – see #8782
Not covered by the proposed solution are cross-origin cross-document navigations. I don’t think that’s a problem because you can’t run View Transitions for such navigations.
/ping @jakearchibald
It would also be nice to have a declarative API for this, e.g.
@view-transition {
navigation: auto;
has-ua-visual-transition: skip;
}
Otherwise sites with purely declarative cross-doc VTs need to drop into JS just to solve this.
It might even be worth making this the automatic behavior at the UA level and make the duplicate transition behavior opt-in, to reduce developer load and error-prone jank. Otherwise the default behavior looks pretty bad.
A polyfill (at least functionally) is theoretically possible for this, I've attempted to build one in the past for same-document transitions. By using global touch listeners and looking for edge or two finger swipes whose touch end is very close to a navigation, you can detect hasUAVisualTransition most of the time. This is still error prone and better for the browser to provide, but it could be detected on the old document and passed through the Navigation API on Chrome to polyfill existing browsers if needed.
It would also be nice to have a declarative API for this, e.g.
@view-transition { navigation: auto; has-ua-visual-transition: skip; }
This feels like a side-ask to the feature being asked here.
- What this issue is about: a way to detect whether a UA Visual Transition was provided in order to skip your own transition.
- What you are asking: a way to prevent (and maybe later even hijack) the UA-provided Visual Transition
The latter is being discussed in w3c/csswg-drafts#8747
My naming is poor and wouldn't be the final syntax but I did mean to suggest a declarative form of what's being asked here. Meaning if the UA has a transition, disable the developer's cross-doc VT.
I wasn't suggesting disabling the UA's transition and agree that is a separate ask.
I was more concerned with the default behavior of overlapping transitions being a janky conflict rather than only one playing, and the workaround being a chunk of boilerplate in a different place than where VTs are enabled.