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

src/views/Ranking/Couple/components/topUser.vue

@@ -263,9 +263,13 @@
           style="height: 100%; display: flex; align-items: center; overflow: hidden"
         >
           <!-- 滚动容器 -->
-          <div v-if="scrollReady && rewardList.length" :key="rewardScrollKey" class="scroll-wrapper">
+          <div
-            <!-- 2套内容 -->
+            v-if="rewardList.length"
-            <div class="scroll-content" v-for="value in 2" :key="value">
+            class="scroll-wrapper"
+            :class="{ 'scroll-wrapper-active': scrollReady }"
+          >
+            <!-- 3套内容，减少 iOS WebView 动画循环边界闪烁 -->
+            <div class="scroll-content" v-for="value in 3" :key="value">
               <div
                 v-for="(item, index) in rewardList"
                 :key="index"
@@ -294,7 +298,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLangStore } from '@/stores/lang'
 import { useI18n } from 'vue-i18n'
@@ -354,7 +358,6 @@ const props = defineProps({
   },
 })
 
-const rewardScrollKey = ref(0)
 const scrollReady = ref(false)
 
 const rewardList = computed(() => {
@@ -409,18 +412,11 @@ const restartRewardScroll = async () => {
 
   rewardRestartTimer = setTimeout(async () => {
     await waitForLayoutFrame()
-    rewardScrollKey.value += 1
     scrollReady.value = rewardList.value.length > 0
     rewardRestartTimer = null
   }, 80)
 }
 
-const handleVisibilityChange = () => {
-  if (!document.hidden) {
-    restartRewardScroll()
-  }
-}
-
 watch(
   () =>
     rewardList.value
@@ -432,18 +428,11 @@ watch(
   { flush: 'post', immediate: true },
 )
 
-onMounted(() => {
-  window.addEventListener('pageshow', restartRewardScroll)
-  document.addEventListener('visibilitychange', handleVisibilityChange)
-})
-
 onUnmounted(() => {
   if (rewardRestartTimer) {
     clearTimeout(rewardRestartTimer)
     rewardRestartTimer = null
   }
-  window.removeEventListener('pageshow', restartRewardScroll)
-  document.removeEventListener('visibilitychange', handleVisibilityChange)
 })
 </script>
 
@@ -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;
 }