Post

Hey Kevin, if you can share your repos, I’d love to take a look at. Of course, I’d be happy to explain how I’d approach it afterward, but without seeing any code, it’s hard to say if there’s anything I can even contribute ;-).

Thank you for your help. I created a repro of my personal home page imkev.dev on Glitch octagonal-frosted-branch.glitch.me. The HTML is identical. Both websites use inline style `@view-transition { navigation: auto; }` My personal site does not work (apart from back/forward) while the glitch works.

👍i'll take a look...

I'm not sure if you get notified about replies on the other thread, but I think I found the cause: `cross-origin-opener-policy` response headers. bsky.app/profile/imke...

Kevin Farrugia@imkev.dev

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

The only differences I can think of are CSP, Cloudflare CDN, and my website uses a Node server while the Glitch demo is static HTML. From my understanding both should work though.

Bramus

@bram.us

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.

Bramus

@bram.us