Re: [csswg-drafts] Interaction with Safari's back/forward previews (#8333)

@romainmenke, I'm able to repro the issue on the site above. Do you mind clarifying the timing of the animation with the navigation? What event do you use to trigger the animation?

I'm seeing 2 classes of problems with these default transitions. I think solving Double Transition is easier so we could start with the small API proposal for it below. @domenic @annevk thoughts?

**Double Transition**
The browser does a transition in response to swipe and the author (who is unaware of this transition) does a transition after. @jakearchibald's demo and the twitter thread above shows that clearly. A trivial way developers can avoid this is by being notified that there's already been a browser transition for a navigation. Something like:

```js
window.addEventListener('popstate', (event) => {
  if (event.hasBrowserTransition) {
   navigateOnly();
    return;
  }

  navigateAndAnimate();
});

navigation.addEventListener('navigate', (event) => {
  if (event.hasBrowserTransition) {
    navigateOnly();
    return;
  }

  navigateAndAnimate();
});
```

**Incorrect Capture**
The browser captures a visual state which is inconsistent with what the user will see on back. This could be from multiple cases:

1. An exit animation like in the comment above.
2. Transient UI which is intentionally removed by the page. Example.
3. User interacted with the page before navigation and a new load doesn't have the mutations in response to that interaction. Scroll restoration takes care of the common case of restoring the scroll offset but not everything. This also depends on whether the nav gets a BFCache hit.

This is harder to solve. We could add a hook where the browser informs the page that it will be captured for a preview and should set up state accordingly. But given #3, it's not deterministic what the user will see at the time the browser would ideally do a capture (the last frame rendered by the outgoing page).

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8333#issuecomment-1398726445 using your GitHub account


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

Received on Friday, 20 January 2023 17:37:10 UTC