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:
2 files changed
+84
-34
No files matched your search
+16
-2
@@ -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
|
||||
|
||||
Reference in new issue
Block a user