/* * compositing-reduced.css * ------------------------------------------------------------------ * Fix for Chrome / Apple-Silicon (Metal) render corruption: as the pointer * moves, areas of the screen flicker / disappear / repaint incorrectly. * * Root cause: stacked `backdrop-filter: blur()` overlays sample pixels across * the compositor-surface boundary of the iframe-hosted editors, which Chrome's * Metal backend mishandles; pointer-driven hover changes force constant layer * re-composition. A per-iframe `translate3d(0,0,0)` layer hack multiplies the * layer count. * * This stylesheet is INERT unless `` is set * (see public/index.html bootstrap + src/utils/reducedCompositing.js). It is * also injected into every editor iframe by Editor.vue, so it covers the host * shell AND the in-iframe editor apps from a single source of truth. * * LOCATION MATTERS: this file MUST live under /themes/ (or another prefix in * the nginx public static allowlist: css|demo|editors|fonts|img|js|models|nql| * themes — see portal/backend/*.conf `location ~ ^/(css|demo|...)`). Root-level * files fall through to the auth-gated proxy and return 401 for requests * (no bearer token), which silently disables this fix. * CACHING: the static allowlist serves with `max-age=31536000, immutable`. * This file is unhashed, so every content change MUST bump the `?v=` query in * BOTH references (public/index.html and src/utils/reducedCompositing.js). * * Toggle at runtime (no rebuild): * window.nitoSetReducedCompositing(true|false) * localStorage 'nito.render.reducedCompositing' = 'true' | 'false' * Default: auto-enabled on Mac / iOS. * ------------------------------------------------------------------ */ /* 1) Kill all backdrop blur — the actual corruption source. Needs no theme * vars, and overrides Vue scoped styles (scoped styles add only an attribute * selector; !important wins). */ html.reduced-compositing *, html.reduced-compositing *::before, html.reduced-compositing *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 2) Legibility compensation. The "glass" surface tokens are 8%–16% opaque and * relied on the now-removed blur to be readable over busy iframe content. * Remap them to the opaque --surface-card token (theme-correct, ~84–88%), * with solid fallbacks for editor iframes that may not define it. Because the * derived tokens are `var(--surface-glass-gradient)`, this one block cascades * to every glass panel, modal, config dialog, activity pane and the alerts * pane. */ html.reduced-compositing { --surface-glass-gradient: var(--surface-card, var(--color-step-12, #1f1f21)); --pane-panel-gradient: var(--surface-card, var(--color-step-12, #1f1f21)); --config-dialog-panel-gradient: var(--surface-card, var(--color-step-12, #1f1f21)); --modal-bg: var(--surface-card, var(--color-step-12, #1f1f21)); } /* 3) Drop the GPU-layer hacks so the compositor stops promoting every persistent * editor iframe / board scene onto its own layer. The source declarations are * left in place (they may still help non-Mac machines); they are neutralised * only in reduced mode here. */ html.reduced-compositing .content-iframe { transform: none !important; will-change: auto !important; } /* Document Board canvas pan/zoom layers (inside the board editor iframe). */ html.reduced-compositing #scene, html.reduced-compositing #scale-layer { will-change: auto !important; }