From 97bbe90ed1d33fb2dbf911ec9587723c68c3ea10 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sat, 21 Feb 2026 18:44:58 -0500 Subject: [PATCH] Fix scroll-reveal animation flicker by adding !important and disabling transitions --- theme/assets/css/main.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 3c42828..4014122 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -99,13 +99,21 @@ a:hover { color: var(--color-primary); } /* ── Scroll-reveal animation classes ───────────────────────── */ .scroll-hidden { - opacity: 0; - transform: translateY(24px); + opacity: 0 !important; + transform: translateY(24px) !important; + /* Prevent transition: all on card elements from animating the hide, + which would cause a visible fade-out flicker and race conditions + with IntersectionObserver — especially after Gutenberg re-saves + inject inline styles onto the block element. */ + transition: none !important; } .scroll-visible { opacity: 1; transform: translateY(0); - transition: opacity .5s ease, transform .5s ease; + /* !important ensures this wins over transition: all on .oribi-card + (same selector specificity, but .oribi-card appears later in the + stylesheet and would otherwise override this). */ + transition: opacity .5s ease, transform .5s ease !important; } /* Smooth theme transition */