lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 71 Wiki Activity

fix(kiosk): flatten background compositing so backgrounds don't go black
Demo images / Build & push demo images (push) Failing after 1m40s
Details

Browse Source 
On kiosk, chromium runs software-composited (--in-process-gpu or
--disable-gpu, one raster thread). The dashboard's 3D-transformed
will-change background layers and the infinite mix-blend-mode:multiply
fixed overlays routinely fail to repaint there after the first
interaction/route change, leaving the container's black fill (or a stuck
multiply layer) covering the screen.

A kiosk-mode class is now set on <html> (localStorage kiosk flag, ?kiosk
param, or the /kiosk boot path) and gates CSS overrides: background
layers become plain 2D opacity crossfades (no preserve-3d/translateZ/
will-change) and the animated multiply overlays are disabled.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago
2026-07-16 07:06:12 -04:00
co-authored by Claude Fable 5
parent 66fd121748
commit 454c4bb25c
3 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/dashboard/dashboard-styles.css
+15
View File
@@ -741,6 +741,21 @@ aside:not(.sidebar-animate) .sidebar-logout-btn {
transform: translateZ(0) scale(1.05) rotateY(0deg) !important;
}
/* Kiosk: chromium runs software-composited (--in-process-gpu or
--disable-gpu, single raster thread). 3D-transformed will-change layers
routinely fail to repaint there after the first background swap, leaving
the container's black fill on screen. Flatten the stack to plain 2D
opacity crossfades in kiosk mode. */
html.kiosk-mode .dashboard-view .bg-perspective-container {
perspective: none;
}
html.kiosk-mode .dashboard-view .bg-layer {
transform: none !important;
transform-style: flat;
will-change: auto;
transition: opacity 0.45s ease;
}
/* Background glitch effect layers - World Fair style */
.bg-glitch-layer-1,
.bg-glitch-layer-2,