From ad1ba740f88a4dc7f8d4d0f877a4386bda8376c3 Mon Sep 17 00:00:00 2001 From: schmop Date: Sun, 31 May 2026 18:39:36 +0200 Subject: [PATCH] Ambiente-Animationen per translate3d auf eigene GPU-Ebene gegen Ruckeln (WebKit/Safari) --- src/lib/components/home/StageAmbience.svelte | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/lib/components/home/StageAmbience.svelte b/src/lib/components/home/StageAmbience.svelte index 814aeaf..bd6f201 100644 --- a/src/lib/components/home/StageAmbience.svelte +++ b/src/lib/components/home/StageAmbience.svelte @@ -116,21 +116,23 @@ } .float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; } + /* translate3d/translateZ erzwingen eine echte GPU-Compositor-Ebene — WebKit/Safari + rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */ @keyframes float { - 0% { transform: translateY(18px) rotate(-5deg); } - 100% { transform: translateY(-30px) rotate(5deg); } + 0% { transform: translate3d(0, 18px, 0) rotate(-5deg); } + 100% { transform: translate3d(0, -30px, 0) rotate(5deg); } } .drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate; } @keyframes drift { - from { transform: translateX(-55px); } - to { transform: translateX(55px); } + from { transform: translate3d(-55px, 0, 0); } + to { transform: translate3d(55px, 0, 0); } } .twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite; } @keyframes twinkle { - 0%, 100% { opacity: 0.25; transform: scale(0.5); } - 50% { opacity: 1; transform: scale(1.35); } + 0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); } + 50% { opacity: 1; transform: scale(1.35) translateZ(0); } } .butterfly { position: absolute; }