Post

Kevin Farrugia
@imkev.dev

@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.

Martin Trapp
@martr.app

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 ;-).

Kevin Farrugia
@imkev.dev

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.

0 reposts0 likes

Kevin Farrugia
@imkev.dev

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

Kevin Farrugia
@imkev.dev

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.