lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 72 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/App.vue
+7
View File
@@ -124,6 +124,13 @@ function syncKioskSafeArea() {
if (typeof document === 'undefined') return
const isKiosk = localStorage.getItem('kiosk') === 'true'
|| new URLSearchParams(window.location.search).has('kiosk')
// Very first kiosk boot: the launcher opens /kiosk before the route
// guard has had a chance to persist localStorage.kiosk.
|| window.location.pathname === '/kiosk'
// Global styling hook: kiosk chromium runs software-composited
// (--in-process-gpu / --disable-gpu), where heavy compositing effects
// (3D bg layers, animated mix-blend overlays) fail and paint black.
document.documentElement.classList.toggle('kiosk-mode', isKiosk)
const rawSafeArea = localStorage.getItem('archipelago_kiosk_safe_area_px') || '0'
const safeArea = /^\d{1,3}$/.test(rawSafeArea) ? Number(rawSafeArea) : 0
const rawSafeAreaX = localStorage.getItem('archipelago_kiosk_safe_area_x_px') || rawSafeArea