fix(cp活动): 修复苹果端奖励滚动动画闪烁问题

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) {
+      if (rewardTranslatePosition >= rewardLoopDistance) {
-        rewardScrollPosition -= 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 {