@@ -484,28 +473,37 @@ onUnmounted(() => {
.scroll-wrapper {
display: flex;
width: fit-content;
+ transform: translate3d(0, 0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
}
.scroll-content {
+ flex: 0 0 auto;
display: flex;
align-items: center;
}
@keyframes scroll-left {
0% {
- transform: translateX(0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
}
100% {
- transform: translateX(-50%);
+ transform: translate3d(-33.333333%, 0, 0);
+ -webkit-transform: translate3d(-33.333333%, 0, 0);
}
}
@keyframes scroll-right {
0% {
- transform: translateX(0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
}
100% {
- transform: translateX(50%);
+ transform: translate3d(33.333333%, 0, 0);
+ -webkit-transform: translate3d(33.333333%, 0, 0);
}
}
@@ -518,12 +516,12 @@ onUnmounted(() => {
margin-right: 4vw;
}
-[dir='ltr'] .scroll-wrapper {
+[dir='ltr'] .scroll-wrapper-active {
animation: scroll-left 8s linear infinite;
will-change: transform;
}
-[dir='rtl'] .scroll-wrapper {
+[dir='rtl'] .scroll-wrapper-active {
animation: scroll-right 8s linear infinite;
will-change: transform;
}