`data-turbo-permanent` fails when using CSS View Transitions

[rctneil]

As you can see in this thread: https://discuss.hotwired.dev/t/keep-audio-playing/5400/1

It looks like View Transitions cause my data-turbo-permanent elements to disappear and effectively not work.

I am using latest Turbo as of this post.

My View Transitions code is:

addEventListener("turbo:before-render", (event) => {
  if (document.startViewTransition) {
    const originalRender = event.detail.render
    event.detail.render = (currentElement, newElement) => {
      document.startViewTransition(()=> originalRender(currentElement, newElement))
    }
  }
})

addEventListener("turbo:before-frame-render", (event) => {
  if (document.startViewTransition) {
    const originalRender = event.detail.render
    event.detail.render = (currentElement, newElement) => {
      document.startViewTransition(()=> originalRender(currentElement, newElement))
    }
  }
})

Is there a fix or solution to this?

[rctneil]

Any suggestions or a fix for this?

[adrienpoly]

@rctneil you might want to try using View Transition with the Turn js package https://github.com/domchristie/turn as of today for me it is the most reliable implementation for page transition.

Turbo has a PR merged (https://github.com/hotwired/turbo/pull/935) for it but this is not yet part of an official release