Discourse-Startbildschirm mit benutzerdefinierten SVG-Bildern branden

Anfangs versuchte ich, für den Splash-Screen animierte SVGs zu verwenden. Während dies auf Desktop-Geräten funktioniert, stellte ich fest, dass die direkte Animation komplexer Pfade oder SVG-interner Elemente auf Mobilgeräten zu Rucklern und sogar zum Stillstand der Animation führt.

Um ein flüssiges Erlebnis zu gewährleisten, verlagerte ich die Animationslogik auf einen standardmäßigen HTML-Container (div), der das SVG umgibt. Indem ich die CSS-Animationen (transform, scale, opacity) auf den div-Wrapper anstatt auf das SVG anwende, können Mobilbrowser die Hardwarebeschleunigung viel effizienter nutzen, ohne dass es zu Rucklern kommt.

5 „Gefällt mir“