fix(ui): stop the dashboard cards leaving a backdrop-filter seam
A vertical line crossing both dashboard cards, appearing at random on hover and hard to catch deliberately. Diagnosed from the screenshot rather than by reproduction. Decoding it and scanning column by column found a lone brightness step at CSS x=633 that never returns — every legitimate container edge in the page shows up as a PAIR of steps 2px apart (the card borders at CSS 255, 288, 850, 875, 1437), so an unpaired one is not a border. Sampling by region placed it inside the cards and nowhere else: 10/13 rows inside My Apps, 11/11 inside Wallet, 2/10 in the gap between them, 2/13 above them. Same screen x in both cards, which means the boundary lives in screen space and cuts whatever backdrop-filter surface it crosses. style.css already neutralises backdrop-filter for the shared glass classes inside the dashboard's animated perspective/scroll containers, because Chromium/Brave mis-rasterise it there — that block was written for the black-rectangle corruption. `.home-card-shell` declares its own `backdrop-filter: blur(18px)` in Home.vue and was never added to the list, so it was the only unmitigated blur surface on the dashboard. That is exactly the set of pixels the seam appears in. A hover repaint re-rasterises part of the backdrop, and the refreshed half meets the stale half at the damage boundary. Adding it to the existing list also makes the shell consistent with the tiles beside it: its fill is already rgba(0,0,0,0.65), the same as .glass-card, which renders unblurred here. The list is hand-maintained, which is how this shipped — a component declaring backdrop-filter in its own <style> is simply not covered and nothing fails. So the fix comes with a test that parses Home.vue for locally-declared backdrop-filter rules and asserts each is in the mitigation list. Verified it catches the real bug: reverting the one-line fix makes it fail naming `.home-card-shell`. Tests: 3/3 new, vue-tsc clean, mitigation confirmed in the built CSS. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
0c4826f8cc
commit
63d0183dd2
+15
-1
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user