[csswg-drafts] Disabling UA transitions for same-document navigations (#8747)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== Disabling UA transitions for same-document navigations ==
Smooth visual transitions as users navigate on the web can lower cognitive load by helping users stay in context. However, the user experience is bad if [both the site author and the UA](https://stackoverflow.com/questions/19662434/in-ios-7-safari-how-do-you-differentiate-popstate-events-via-edge-swipe-vs-the) add these transitions: the transitions may conflict and cause confusion for the user.

The goal of this API is to enable authors to disable default UA transitions for a navigation in favour of custom transitions on their site. This [explainer](https://github.com/WICG/view-transitions/blob/main/default-ua-transitions.md) goes through the detailed thinking behind it, here is the TLDR:

* We want to introduce an API which indicates whether same-document navigations from the current Document are allowed to execute a visual transition defined by the UA.
* Navigations can be of 2 types: atomic (clicking the back button) or predictive/swipe (swipe from the edge of a mobile screen). The key difference is that with atomic navigations the visual transition starts when the navigation is initiated. With predictive/swipe, the visual transition starts with the gesture and may not necessarily result in a navigation.
* The current proposal doesn't allow the value to be configured based on the destination URL for simplicity. But we'd like the API to be extensible to support this use-case.

The proposal is a new [at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) named `same-document-ua-transition` which can have the following values:

* `auto` : Enables UA transitions for all navigations.
* `disable-swipe` : Disables UA transitions for atomic navigations.
* `disable-atomic`: Disables UA transitions for swipe navigations.
* `disable-swipe disable-atomic` : Disables UA transitions for atomic and swipe navigations.

The value can be specified as follows:

```css
@same-document-ua-transition: auto;

@media (min-width: 360px) {
  @same-document-ua-transition: disable-atomic;
}
```

Other options for this API are outlined [here](https://github.com/WICG/view-transitions/blob/main/default-ua-transitions.md#css-api).

Other considerations when evaluating this proposal:

* [Default Value](https://github.com/WICG/view-transitions/blob/main/default-ua-transitions.md#default-value): It's unclear whether UA transitions should be allowed by default or not. Allowing them by default has a compat risk of breaking sites which ship with custom transitions already.
* Integration with Navigation API: This API works in tandem with the proposal [here](https://github.com/whatwg/html/issues/8782). If the author disables UA transitions for atomic navigations but not swipe, they will be able to detect which one happened when the navigation events are fired.
* Should this go in the View Transitions spec? The proposal is unrelated but VT comes closest to the concept of visual transitions on navigations in CSS.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8747 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 21 April 2023 23:04:24 UTC