mrmo/caf-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix RTL layout bug breaking the achievements marquee loop

Browse Source 
The page is RTL, so the oversized flex track's natural (untransformed) box wasn't left-aligned with its container the way the 0%->-50% keyframe math assumed. Halfway through the loop, translateX(-50%) was scrolling past all the actual image content into empty space beyond the track, showing a fully blank marquee for part of every cycle.

Force direction:ltr on .achv-marquee so the track lays out and scrolls the same predictable way regardless of page direction. Verified: track's left edge now matches the container's left edge at rest, and the duplicate set's first image lands exactly where the original one started, so the loop is seamless.
This commit is contained in:
Line INK
2026-08-27 22:19:53 +03:00
parent 02652424df
commit 06262ec04c
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -278,7 +278,7 @@
.achievements-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:transform .3s ease;} .achievements-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:transform .3s ease;}
.achievements-grid img:hover{transform:translateY(-6px);} .achievements-grid img:hover{transform:translateY(-6px);}
.achv-marquee{margin-top:52px;position:relative;overflow:hidden;} .achv-marquee{margin-top:52px;position:relative;overflow:hidden;direction:ltr;}
.achv-marquee::before,.achv-marquee::after{ .achv-marquee::before,.achv-marquee::after{
content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none; content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
} }