From 6cc3dd2a8565b50aa61bdf24ff644b719cbcd91e Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 7 May 2026 18:49:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(cp=E6=B4=BB=E5=8A=A8):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=8B=B9=E6=9E=9C=E7=AB=AF=E5=A5=96=E5=8A=B1=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Ranking/Couple/components/topUser.vue     | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue
index 2c981c7..cc185b4 100644
--- a/src/views/Ranking/Couple/components/topUser.vue
+++ b/src/views/Ranking/Couple/components/topUser.vue
@@ -261,7 +261,7 @@
       <div class="reward-wrapper">
         <div ref="rewardViewportRef" class="reward-scroll-viewport">
           <!-- 滚动容器 -->
-          <div v-if="rewardList.length" class="scroll-wrapper">
+          <div v-if="rewardList.length" ref="rewardScrollRef" class="scroll-wrapper">
             <!-- 3套内容，减少 iOS WebView 动画循环边界闪烁 -->
             <div class="scroll-content" v-for="value in 3" :key="value">
               <div
@@ -353,6 +353,7 @@ const props = defineProps({
 })
 
 const rewardViewportRef = ref(null)
+const rewardScrollRef = ref(null)
 
 const rewardList = computed(() => {
   return Array.isArray(props.rewards?.activityRewardProps) ? props.rewards.activityRewardProps : []
@@ -385,7 +386,7 @@ let rewardRestartTimer = null
 let rewardAnimationFrame = null
 let rewardLastFrameTime = 0
 let rewardLoopDistance = 0
-let rewardScrollPosition = 0
+let rewardTranslatePosition = 0
 
 const waitForLayoutFrame = () => {
   return new Promise((resolve) => {
@@ -414,12 +415,13 @@ const restartRewardScroll = async () => {
   rewardRestartTimer = setTimeout(async () => {
     await waitForLayoutFrame()
     const viewport = rewardViewportRef.value
-    if (!viewport || !rewardList.value.length) {
+    const scrollWrapper = rewardScrollRef.value
+    if (!viewport || !scrollWrapper || !rewardList.value.length) {
       rewardRestartTimer = null
       return
     }
 
-    const scrollCopies = viewport.querySelectorAll('.scroll-content')
+    const scrollCopies = scrollWrapper.querySelectorAll('.scroll-content')
     if (scrollCopies.length < 2) {
       rewardRestartTimer = null
       return
@@ -434,21 +436,22 @@ const restartRewardScroll = async () => {
       return
     }
 
-    rewardScrollPosition = 0
+    rewardTranslatePosition = 0
     viewport.scrollLeft = 0
+    scrollWrapper.style.transform = 'translate3d(0, 0, 0)'
     rewardLastFrameTime = performance.now()
 
     const step = (now) => {
       const elapsed = now - rewardLastFrameTime
       rewardLastFrameTime = now
       const distancePerMs = rewardLoopDistance / 8000
-      rewardScrollPosition += distancePerMs * elapsed
+      rewardTranslatePosition += distancePerMs * elapsed
 
-      if (rewardScrollPosition >= rewardLoopDistance) {
-        rewardScrollPosition -= rewardLoopDistance
+      if (rewardTranslatePosition >= rewardLoopDistance) {
+        rewardTranslatePosition -= rewardLoopDistance
       }
 
-      viewport.scrollLeft = rewardScrollPosition
+      scrollWrapper.style.transform = `translate3d(${-rewardTranslatePosition}px, 0, 0)`
 
       rewardAnimationFrame = requestAnimationFrame(step)
     }
@@ -478,6 +481,9 @@ onUnmounted(() => {
     cancelAnimationFrame(rewardAnimationFrame)
     rewardAnimationFrame = null
   }
+  if (rewardScrollRef.value) {
+    rewardScrollRef.value.style.transform = ''
+  }
 })
 </script>
 
@@ -521,13 +527,17 @@ onUnmounted(() => {
   align-items: center;
   overflow: hidden;
   direction: ltr;
-  scroll-behavior: auto;
   overflow-anchor: none;
 }
 
 .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;
+  will-change: transform;
 }
 
 .scroll-content {