peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): opacity-based frosted glass; drop full-page settings blur

Browse source 
Evidence (sharp video behind overlays) shows backdrop-filter is a no-op here, most
likely because browser hardware acceleration is off — so the glass relied on a blur
that never rendered. Lean on opacity instead (94% surface) so overlay menus/panels
read as frosted glass regardless of GPU; keep the blur as a bonus when available.
Revert the settings backdrop to a plain dim scrim (no whole-page blur) and make the
header a solid bar (no backdrop-filter ancestor).
This commit is contained in:
npeter83 2026-06-11 22:39:52 +02:00
parent 4a35e8b42a
commit f429889250
3 changed files with 10 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/Header.tsx
View file

@ -26,7 +26,7 @@ export default function Header({
} }
return ( return (
<header className="h-14 shrink-0 border-b border-border bg-surface/80 backdrop-blur flex items-center gap-3 px-4 z-20"> <header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
<button <button
onClick={() => setPage("feed")} onClick={() => setPage("feed")}
className="text-xl font-bold tracking-tight select-none" className="text-xl font-bold tracking-tight select-none"

2
frontend/src/components/SettingsPanel.tsx
View file

@ -54,7 +54,7 @@ export default function SettingsPanel({
return ( return (
<div className="fixed inset-0 z-40 flex justify-end"> <div className="fixed inset-0 z-40 flex justify-end">
<div <div
className={`absolute inset-0 bg-black/30 backdrop-blur-lg ${ className={`absolute inset-0 bg-black/50 ${
closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]" closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]"
}`} }`}
onClick={close} onClick={close}

14
frontend/src/index.css
View file

@ -32,12 +32,14 @@ body {
/* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */ /* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */
.glass { .glass {
/* Frosted overlay surface: strong blur so background content is an unreadable /* Frosted overlay surface. We lean on opacity (not blur) so it looks right even
blur, plus enough opacity to stay legible over anything. */ when the browser has hardware acceleration off, where backdrop-filter is a no-op
background: color-mix(in srgb, var(--surface) 86%, transparent); and a sharp background would otherwise show through. The blur is a bonus that
backdrop-filter: blur(32px) saturate(1.8); kicks in when GPU compositing is available. */
-webkit-backdrop-filter: blur(32px) saturate(1.8); background: color-mix(in srgb, var(--surface) 94%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); backdrop-filter: blur(30px) saturate(1.8);
-webkit-backdrop-filter: blur(30px) saturate(1.8);
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
box-shadow: box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
0 18px 44px -16px rgba(0, 0, 0, 0.6); 0 18px 44px -16px rgba(0, 0, 0, 0.6);