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.

Are you using @import in your CSS by any chance?

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?

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?

I double checked with engineering and this is a bug. If you don't beat me to it, I'll file a bug on crbug.com/new later today.

Done: issues.chromium.org/issues/38089... Thanks for following up.

Perfect, thanks! 🙏