Seidenhintergrund im Dev-Modus reparieren, Resize-Warnung beheben

- SilkBackground: beim Aufräumen nur Programm/Buffer löschen statt den
  WebGL-Kontext zu verwerfen. React Strict Mode mountet im Dev-Modus
  zweimal, der zweite Mount bekam sonst einen verlorenen Kontext und der
  Hintergrund blieb leer. Kontextverlust/-wiederherstellung wird jetzt
  behandelt.
- useFitText: nur auf Breitenänderungen reagieren und die Anpassung in den
  nächsten Frame verschieben, damit keine "ResizeObserver loop"-Fehler
  entstehen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
This commit is contained in:
Claude committed 2026-09-29 12:12:42 +00:00
1 parent 61a40437d2
commit f21d79c08d
2 files changed
+84 -34

No files matched your search

+16 -2
View File
@@ -22,9 +22,23 @@ export function useFitText<T extends HTMLElement>(max = 400) {
fit()
document.fonts?.ready.then(fit)
const ro = new ResizeObserver(fit)
let frame = 0
let lastWidth = parent.clientWidth
const ro = new ResizeObserver(() => {
// Höhenänderungen entstehen durch die Schriftgröße selbst — nur auf neue Breiten reagieren
const width = parent.clientWidth
if (width === lastWidth) return
lastWidth = width
// außerhalb der Observer-Runde anpassen, sonst meldet der Browser eine Resize-Schleife
cancelAnimationFrame(frame)
frame = requestAnimationFrame(fit)
})
ro.observe(parent)
return () => ro.disconnect()
return () => {
cancelAnimationFrame(frame)
ro.disconnect()
}
}, [max])
return ref