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

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
+12
View File
@@ -1615,6 +1615,18 @@ html.no-backdrop *::after {
-webkit-backdrop-filter: none !important;
}
/* Kiosk: the infinite mix-blend-mode:multiply glitch overlays with
background-attachment:fixed are a known black-screen vector under the
kiosk's software compositor — a missed repaint leaves a dark multiply
layer stuck over the whole viewport. Their base opacity is 0, so
disabling the animations hides them entirely on kiosk. */
html.kiosk-mode body::before,
html.kiosk-mode body::after,
html.kiosk-mode::before {
animation: none !important;
will-change: auto !important;
}
/* Dashboard: full viewport width, no letterboxing, no body scroll */
body.dashboard-active {
overflow: hidden;