diff --git a/neode-ui/src/views/OnboardingWrapper.vue b/neode-ui/src/views/OnboardingWrapper.vue index 58c14fef..571d89b6 100644 --- a/neode-ui/src/views/OnboardingWrapper.vue +++ b/neode-ui/src/views/OnboardingWrapper.vue @@ -699,8 +699,12 @@ video.bg-layer { :global(html.kiosk-mode .perspective-container) { perspective: none !important; } +/* Scoped to the onboarding viewport: a bare `.view-wrapper` match also killed + the dashboard's route transitions on kiosk (transform:none !important beats + the transition classes), freezing every tab change. The dashboard has its + own kiosk-safe 2D transition overrides in dashboard-styles.css. */ :global(html.kiosk-mode .bg-layer), -:global(html.kiosk-mode .view-wrapper) { +:global(html.kiosk-mode .onb-viewport .view-wrapper) { transform: none !important; transform-style: flat !important; backface-visibility: visible !important; diff --git a/neode-ui/src/views/dashboard/dashboard-styles.css b/neode-ui/src/views/dashboard/dashboard-styles.css index 88a99005..8c428b41 100644 --- a/neode-ui/src/views/dashboard/dashboard-styles.css +++ b/neode-ui/src/views/dashboard/dashboard-styles.css @@ -756,6 +756,38 @@ html.kiosk-mode .dashboard-view .bg-layer { transition: opacity 0.45s ease; } +/* Kiosk: keep tab changes animated with cheap 2D moves. The 3D depth + transitions (translateZ + blur + preserve-3d) drop frames / paint black + under the software compositor, and the onboarding-era blanket + `transform: none` on .view-wrapper killed tab motion entirely. Plain 2D + scale + opacity composites fine there. */ +html.kiosk-mode .depth-forward-enter-active.view-wrapper, +html.kiosk-mode .depth-forward-leave-active.view-wrapper, +html.kiosk-mode .depth-back-enter-active.view-wrapper, +html.kiosk-mode .depth-back-leave-active.view-wrapper { + transition: transform 0.45s ease, opacity 0.45s ease; + transform-style: flat; + backface-visibility: visible; + filter: none !important; +} +html.kiosk-mode .depth-forward-enter-from.view-wrapper, +html.kiosk-mode .depth-back-leave-to.view-wrapper { + transform: scale(0.94); + filter: none !important; +} +html.kiosk-mode .depth-forward-leave-to.view-wrapper, +html.kiosk-mode .depth-back-enter-from.view-wrapper { + transform: scale(1.05); + filter: none !important; +} +html.kiosk-mode .depth-forward-enter-to.view-wrapper, +html.kiosk-mode .depth-forward-leave-from.view-wrapper, +html.kiosk-mode .depth-back-enter-to.view-wrapper, +html.kiosk-mode .depth-back-leave-from.view-wrapper { + transform: scale(1); + filter: none !important; +} + /* Background glitch effect layers - World Fair style */ .bg-glitch-layer-1, .bg-glitch-layer-2,