diff --git a/neode-ui/src/style.css b/neode-ui/src/style.css index eaa2ceb8..e3307c14 100644 --- a/neode-ui/src/style.css +++ b/neode-ui/src/style.css @@ -324,8 +324,22 @@ html.controller-nav [data-controller-container]:focus { /* Dashboard content lives inside animated perspective/scroll containers. Chromium/Brave can corrupt backdrop-filter + transformed cards into black - square/rectangle layers, so use translucent fills there instead. */ + square/rectangle layers, so use translucent fills there instead. + + `.home-card-shell` (Home.vue) was missing from this list and kept its own + `backdrop-filter: blur(18px)`, producing a second, subtler form of the + same corruption: a vertical seam where the blurred backdrop is refreshed + on one side and stale on the other. Because the boundary is in SCREEN + space, it cut both dashboard cards at the same x and vanished in the gap + between them — which is how it was identified from a screenshot + (2026-08-03: a lone unpaired brightness step at CSS x=633, present on + 10/13 sampled rows inside the cards and 2/10 in the gap). It surfaced on + hover because a hover repaint is what re-rasterises part of the + backdrop. The card's fill is already rgba(0,0,0,0.65) — the same as + .glass-card, which renders unblurred here — so dropping the blur also + makes the shell consistent with the tiles beside it. */ body.dashboard-active .dashboard-scroll-panel .glass-card, + body.dashboard-active .dashboard-scroll-panel .home-card-shell, body.dashboard-active .dashboard-scroll-panel .glass, body.dashboard-active .dashboard-scroll-panel .mode-switcher, body.dashboard-active .dashboard-scroll-panel .glass-button, diff --git a/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts b/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts new file mode 100644 index 00000000..384c28f8 --- /dev/null +++ b/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts @@ -0,0 +1,80 @@ +import { describe, it, expect } from 'vitest' +import { readFileSync } from 'node:fs' +import { resolve } from 'node:path' + +/** + * Chromium/Brave mis-rasterise `backdrop-filter` inside the dashboard's + * animated perspective/scroll containers. style.css already neutralises it + * for the shared glass classes, but that list is hand-maintained: a component + * that declares its own `backdrop-filter` in a local