fix: Firefox fallback breaks right-edge fade in related content (#1332)

* 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
This commit is contained in:
powerfullz
2026-05-03 22:50:35 +02:00
committed by GitHub
parent d3eacc9daf
commit e294e4ed70
+12 -7
View File
@@ -95,13 +95,6 @@
-webkit-mask-image: var(--subsection-mask-image); -webkit-mask-image: var(--subsection-mask-image);
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"] & { [dir="rtl"] & {
margin-left: calc(var(--overlap-x) * -1); margin-left: calc(var(--overlap-x) * -1);
margin-right: calc(var(--overlap-x) * -1); margin-right: calc(var(--overlap-x) * -1);
@@ -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 { @keyframes subsection-left-fade {
from { from {
--left-edge-fade-size: 0px; --left-edge-fade-size: 0px;