Skip to content

Fix washed-out UI after window resize #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Fanzzzd wants to merge 2 commits into
base: main
Choose a base branch
from
+32 −5
Open

Fix washed-out UI after window resize #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4af62d0
fix: reapply glass effect after resize
Fanzzzd Mar 4, 2026
7f67130
fix: guard window lookup in liquid glass apply
Fanzzzd Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/features/app/hooks/useLiquidGlassEffect.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,25 @@ describe("useLiquidGlassEffect", () => {
});
});

it("reapplies liquid glass after resize", async () => {
vi.mocked(isGlassSupported).mockResolvedValue(true);

renderHook(() => useLiquidGlassEffect({ reduceTransparency: false }));

await waitFor(() => {
expect(setLiquidGlassEffect).toHaveBeenCalled();
});
const beforeResizeCalls = vi.mocked(setLiquidGlassEffect).mock.calls.length;

window.dispatchEvent(new Event("resize"));

await waitFor(() => {
expect(vi.mocked(setLiquidGlassEffect).mock.calls.length).toBeGreaterThan(
beforeResizeCalls,
);
});
});

it("applies Acrylic effect on Windows when liquid glass is unsupported", async () => {
vi.mocked(isGlassSupported).mockResolvedValue(false);
setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
Expand Down
18 changes: 13 additions & 5 deletions src/features/app/hooks/useLiquidGlassEffect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,16 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) {

const apply = async () => {
try {
const window = getCurrentWindow();
const windowHandle = getCurrentWindow();

if (reduceTransparency) {
if (supportedRef.current === null) {
supportedRef.current = await isGlassSupported();
}
if (supportedRef.current) {
await setLiquidGlassEffect({ enabled: false });
}
await window.setEffects({ effects: [] });
await windowHandle.setEffects({ effects: [] });
return;
}

Expand All @@ -39,7 +40,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) {
return;
}
if (supportedRef.current) {
await window.setEffects({ effects: [] });
await windowHandle.setEffects({ effects: [] });
await setLiquidGlassEffect({
enabled: true,
cornerRadius: 16,
Expand All @@ -54,7 +55,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) {
const isWindows = userAgent.includes("Windows");

if (isWindows) {
await window.setEffects({
await windowHandle.setEffects({
effects: [Effect.Acrylic],
state: EffectState.Active,
});
Expand All @@ -64,7 +65,7 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) {
if (!isMac && !isLinux) {
return;
}
await window.setEffects({
await windowHandle.setEffects({
effects: [Effect.HudWindow],
state: EffectState.Active,
radius: 16,
Expand All @@ -84,9 +85,16 @@ export function useLiquidGlassEffect({ reduceTransparency, onDebug }: Params) {
};

void apply();
const handleResize = () => {
if (!cancelled && !reduceTransparency) {
void apply();
Comment on lines +88 to +90
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Throttle liquid-glass reapply on resize

During an interactive window drag, resize fires repeatedly, and this handler calls apply() for every event. Because apply() performs async Tauri IPC (setEffects and, when supported, setLiquidGlassEffect), this can enqueue many native effect updates per second and cause visible jank before the final state settles. Coalescing resize events (debounce/throttle or single in-flight guard) would avoid this regression while still restoring the effect after resize.

Useful? React with 👍 / 👎.

}
};
window.addEventListener("resize", handleResize);

return () => {
cancelled = true;
window.removeEventListener("resize", handleResize);
};
}, [onDebug, reduceTransparency]);
}
Loading