fix(kiosk): background art rendered black — never paint a background on <html>
All checks were successful
Demo images / Build & push demo images (push) Successful in 2m44s

html.kiosk-safe-area set background:#000 on the root element. With a root
background, body's background stops propagating to the canvas and paints
as a normal block background instead — which by CSS paint order covers
negative-z-index descendants. The dashboard/login art lives in
.bg-perspective-container at z-index:-10, so every kiosk display showed
solid black behind the UI while desktop browsers (no root background)
showed the art. Verified live on the Framework 4K TV via CDP: making the
root transparent restores the art instantly. Keep the black on body only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago 2026-07-21 13:14:49 -04:00
parent 8968d41ca9
commit 0213da3fc5

View File

@ -1417,6 +1417,15 @@ html.kiosk-safe-area body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* Black fill on BODY only, never on the root element. With a background on
<html>, body's background no longer propagates to the canvas and instead
paints as a normal block background which by CSS paint order lands ON TOP
of negative-z-index descendants, i.e. over .bg-perspective-container
(z-index -10): every dashboard/login background image rendered as solid
black on kiosk displays. Body-only matches the non-kiosk pages, where the
art has always shown. */
html.kiosk-safe-area body {
background: #000;
}