| @@ -37,16 +37,36 @@ | ||
| 37 | 37 | position: relative; |
| 38 | 38 | } |
| 39 | 39 | |
| 40 | 40 | .king-addons-auto-scrolling-text-wrapper { |
| 41 | - display: inline-block; | |
| 41 | + display: flex; | |
| 42 | + width: max-content; | |
| 42 | 43 | white-space: nowrap; |
| 43 | 44 | animation: king-addons-auto-scrolling-animation 20s linear infinite; |
| 45 | + | |
| 46 | + /* Keep the track on its own compositor layer. Without this the browser can | |
| 47 | + promote and demote it around the animation and re-rasterize the text, | |
| 48 | + which shows up as an occasional hitch in an otherwise steady scroll. */ | |
| 49 | + will-change: transform; | |
| 44 | 50 | } |
| 45 | 51 | |
| 52 | +.king-addons-auto-scrolling-text-group { | |
| 53 | + flex: 0 0 auto; | |
| 54 | + white-space: nowrap; | |
| 55 | +} | |
| 56 | + | |
| 57 | +/* The shift is one copy of the content, so the next copy lands exactly where | |
| 58 | + this one started and the reset is invisible. The script sets the value once | |
| 59 | + it knows how many copies fit; -50% is the two-copy fallback. */ | |
| 46 | 60 | @keyframes king-addons-auto-scrolling-animation { |
| 47 | 61 | 0% { transform: translateX(0); } |
| 48 | - 100% { transform: translateX(-100%); } | |
| 62 | + 100% { transform: translateX(var(--king-addons-marquee-shift, -50%)); } | |
| 63 | +} | |
| 64 | + | |
| 65 | +@media (prefers-reduced-motion: reduce) { | |
| 66 | + .king-addons-auto-scrolling-text-wrapper { | |
| 67 | + animation: none; | |
| 68 | + } | |
| 49 | 69 | } |
| 50 | 70 | |
| 51 | 71 | .swiper-container:not(.swiper-container-initialized) > .swiper-wrapper, |
| 52 | 72 | .swiper:not(.swiper-initialized) > .swiper-wrapper { |
