Post

@bram.us Could you recommend some reading material to help me debug View Transitions (cross document, same origin) please? I have two sites with identical CSS, on one site they work as expected while on the other they only work when the user presses back/forward buttons.

Check the DevTools Console Tab for log messages. Use the Animations Tab in DevTools to pause your transitions. If you are using pageswap/pagereveal don't forget to do cleanup after the transition ran to handle BFCache.

I'm using pageswap/pagereveal and I'm not getting any console errors whatsoever. There is no animation, so nothing shows up in the Animations Tab. It only animates when pressing back/forward. I use speculation rules for prerendering the page, I am not sure if those interfere with View Transitions. 🤷

Typo: I'm _not_ using pageswap/pagehide.

Nope. I would like to be able to debug it but I don't know where to look. Is there a list of things that make a page ineligible?

Based on the symptoms, it seems the browser is convinced that there were server-side cross-origin redirects. That also aligns with the fact that view transitions work when traversing the history. Second bullet point here: drafts.csswg.org/css-view-tra...

Is there a limitation to using view-transition with `cross-origin-opener-policy: same-origin` ? I have a demo here: tidy-fluttering-jackfruit.glitch.me A replica of the above site without the response header for comparison: mellow-crystal-marscapone.glitch.me

If that header is the only difference between those two glitches, it definitely seems to be the cause of the problem. Maybe some heuristic inside Chrome?