diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue index 682fe91..a18a501 100644 --- a/src/views/Ranking/Couple/components/topUser.vue +++ b/src/views/Ranking/Couple/components/topUser.vue @@ -263,9 +263,13 @@ style="height: 100%; display: flex; align-items: center; overflow: hidden" > -
- -
+
+ +
@@ -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; }