kushidou/hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/partials/layout/list.scss
+13 -8
View File
@@ -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;