fix: GPU-accelerate blob animations to prevent layout jitter

Added will-change:transform, contain:layout style, and
backface-visibility:hidden to all blob animations. This promotes
blobs to their own GPU compositing layer, preventing them from
triggering main-thread reflow/repaint that causes page shaking.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-04 00:46:26 +09:00
parent eb058ab2e5
commit c07f839773
1 changed files with 7 additions and 0 deletions

View File

@ -125,6 +125,13 @@
} }
} }
/* GPU-accelerate all blob animations to prevent layout jitter */
.animate-blob, .animate-blob-large {
will-change: transform;
contain: layout style;
backface-visibility: hidden;
}
.animate-blob-large { .animate-blob-large {
animation: blob-large 25s infinite ease-in-out; animation: blob-large 25s infinite ease-in-out;
} }