[csswg-drafts] [css-view-transitions-1] Interaction with Safari's back/forward previews (#8333)

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

== [css-view-transitions-1] Interaction with Safari's back/forward previews ==
Both Safari iOS and Safari Desktop 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). This includes same-document traversals.

https://user-images.githubusercontent.com/93594/213422693-c1f607e7-de00-4c8e-9be2-86d4d48cc93f.mp4

https://user-images.githubusercontent.com/93594/213422739-3a773a47-cb7e-4a5a-a578-c4bcd7dc5cda.mp4

This already causes issues in cases where developers have created their own transition. Demo: https://static-misc-3.glitch.me/basic-navigation-transition/. Here's what happens:

1. User is on "state 2".
2. User drags from the left, revealing a screenshot of "state 1".
3. Navigation commits, but since it's same-document, it's still in "state 1".
4. Developer gets a `popstate` event, so they begin a transition from "state 1" to "state 2", meaning it looks like things 'snap back' to "state 2".

https://user-images.githubusercontent.com/93594/213426547-7a76c525-c974-44a4-a48f-9055cd865a15.mp4

It feels like we should avoid this kind of experience with view transitions (both SPA and MPA).

I think a good starting point is: Is there something developers should be doing today to avoid this kind of experience in Safari? If not, we can invent something 😀

@smfr any ideas around this?

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


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

Received on Thursday, 19 January 2023 11:23:08 UTC