From e294e4ed70e641d76ee20419c2809efa3c1adc0e Mon Sep 17 00:00:00 2001
From: powerfullz <61956140+powerfullz@users.noreply.github.com>
Date: Mon, 4 May 2026 04:50:35 +0800
Subject: [PATCH] fix: Firefox fallback breaks right-edge fade in related
 content (#1332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Firefox fallback breaks right-edge fade in related content (#133X)

Firefox does not support scroll-driven animations by default, causing
the animation to fall back to a 0s time-based animation that jumps to
the last keyframe — flipping the fade from right to left.

Wrap animation properties in @supports (animation-timeline: scroll())
so Firefox degrades gracefully to a static right-edge fade.

* chore: fix identation

* fix: add back wrongly deleted props
---
 assets/scss/partials/layout/list.scss | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index 33cfed2..711bec0 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@@ -95,18 +95,11 @@
     -webkit-mask-image: var(--subsection-mask-image);
     mask-image: var(--subsection-mask-image);
 
-    // CSS-only: left fade ramps in quickly once horizontal scrolling starts,
-    // and right fade turns off near the end of horizontal scroll.
-    animation: subsection-left-fade linear both, subsection-right-fade linear both;
-    animation-timeline: scroll(self inline);
-    animation-range: 1px 24px, 0% 100%;
-    animation-timing-function: ease-out, linear;
-
     [dir="rtl"] & {
         margin-left: calc(var(--overlap-x) * -1);
         margin-right: calc(var(--overlap-x) * -1);
     }
-    
+
     .article-list--tile {
         display: flex;
         padding: var(--spacing-xs) var(--overlap-x) var(--shadow-overlap-y) var(--overlap-x);
@@ -132,6 +125,18 @@
     }
 }
 
+// Only apply scroll-driven edge fades in browsers that support scroll timelines.
+// Browsers without support (e.g. Firefox) fall back to the static right-edge fade
+// defined by the explicit CSS variable declarations above.
+@supports (animation-timeline: scroll(self inline)) {
+    .subsection-list {
+        animation: subsection-left-fade linear both, subsection-right-fade linear both;
+        animation-timeline: scroll(self inline);
+        animation-range: 1px 24px, 0% 100%;
+        animation-timing-function: ease-out, linear;
+    }
+}
+
 @keyframes subsection-left-fade {
     from {
         --left-edge-fade-size: 0px;