fix(equalizer): redraw curve when <details> reopens (#747)

* fix(equalizer): redraw curve when surrounding <details> toggles open

ResizeObserver does not reliably fire for the `display:none → block`
transition that the SettingsSubSection `<details>` causes when the user
expands the Equalizer panel after collapsing it. drawCurve bails on a
zero-sized canvas (existing macOS-WebKit guard), and without a new
trigger the second open leaves the frequency-response canvas blank.
Add a `toggle` listener on the closest `<details>` ancestor; on open,
redraw after one rAF so the canvas has its laid-out size. Additive —
doesn't change the working ResizeObserver path.

* docs(changelog): note Equalizer canvas redraw fix (#747)
This commit is contained in:
Frank Stellmacher
2026-05-17 13:11:01 +02:00
committed by GitHub
parent 2beb30f871
commit 4916c4a36f
2 changed files with 20 additions and 0 deletions
+14
View File
@@ -41,6 +41,20 @@ export default function Equalizer() {
return () => ro.disconnect();
}, [redraw]);
// ResizeObserver does not always fire for the `display: none → block`
// transition the surrounding <details> causes when toggled, leaving the
// canvas blank on the second open. Redraw explicitly when the parent
// <details> opens; rAF waits one frame for the canvas to take its size.
useEffect(() => {
const details = canvasRef.current?.closest('details');
if (!details) return;
const onToggle = () => {
if (details.open) requestAnimationFrame(redraw);
};
details.addEventListener('toggle', onToggle);
return () => details.removeEventListener('toggle', onToggle);
}, [redraw]);
const isCustomSaved = activePreset && !BUILTIN_PRESETS.some(p => p.name === activePreset);
const selectValue = activePreset ?? '__custom__';