-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Detect UA transitions on same-origin cross-document navigations #10831
Comments
/ping @jakearchibald |
It would also be nice to have a declarative API for this, e.g.
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 |
This feels like a side-ask to the feature being asked here.
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. |
I received an author request for this as well: https://bsky.app/profile/davatron5000.bsky.social/post/3lfslgolirs2x (I incorrectly replied to them that they can already check this … but that depends on this proposal getting accepted + implemented) |
Is there any conceivable use cases in which you would want to run both transitions? Shouldn't the UA always skip the cross-document view transition in this scenario? |
I can't come up with one offhand. Perhaps an animation that should play on the new page but presumably the UA transition already shows the fully rendered new state, or renders it directly. Perhaps it's enough to just default to skipping cross-doc transitions when there is a UA visual transition. Anything more than that would involve something more advanced that doesn't yet exist, like gesture-linked cross-doc VTs and that would have its own details to work out. |
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 toNavigationActivation
. 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 #8782Not 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.
The text was updated successfully, but these errors were encountered: