lfg2025/archy
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 61 Wiki Activity

fix(kiosk): restore tab-change animations with 2D transitions

Browse Source 
The onboarding-era :global(html.kiosk-mode .view-wrapper) transform:none
rule also matched the dashboard's route wrappers, freezing every list<->
detail depth transition into a jump cut on kiosk. Scope that rule to the
onboarding viewport and give the dashboard kiosk-safe 2D equivalents
(scale + opacity, no translateZ/blur/preserve-3d) that the software
compositor can animate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago 2026-07-21 13:27:04 -04:00
parent 97358d2314
commit dc55ef8a54
2 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
neode-ui/src/views/OnboardingWrapper.vue
View File

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

32
neode-ui/src/views/dashboard/dashboard-styles.css
View File

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