fix(pdf): suppress root view-transition animation to isolate fade to PDF pane only
Build and Deploy Verso / deploy (push) Successful in 11m47s

document.startViewTransition generates both a named pseudo-element for the PDF
container (ol-pdf-viewer) and a root-level pseudo-element that covers the entire
page, causing the editor to fade along with the PDF.

Inject a temporary <style> that sets animation:none on the root pseudo-elements
before starting the transition, then remove it in transition.finished.  Only the
named PDF container crossfades; the editor is unaffected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-07 12:39:01 +00:00
parent d895e14e48
commit 453439e611
@@ -157,15 +157,23 @@ export default class PDFJSWrapper {
) {
// Chrome 111+ / Edge 111+: document-level View Transition.
// Give the PDF container a unique view-transition-name so only it
// crossfades; the rest of the page stays static.
// crossfades. We also suppress the auto-generated root-level animation
// (which would otherwise fade the entire page including the editor) by
// injecting a temporary <style> that sets animation:none on the root
// pseudo-elements. The style is removed after the transition finishes.
const name = 'ol-pdf-viewer'
this.container.style.viewTransitionName = name
const noRootAnim = document.createElement('style')
noRootAnim.textContent =
'::view-transition-old(root),::view-transition-new(root){animation:none}'
document.head.appendChild(noRootAnim)
const transition = doc_.startViewTransition(async () => {
setDocument()
await firstPageRendered
})
transition.finished.finally(() => {
this.container.style.viewTransitionName = ''
noRootAnim.remove()
})
transition.ready.catch(onTransitionError)
} else {