fix: safari card animation

src/app/globals.css

@@ -174,3 +174,76 @@ div[data-media-provider] video {
     display: none !important;
   }
 }
+
+/* WebKit 动画性能优化类 - 修复视频卡片动画闪烁和卡顿 */
+.webkit-animation-fix {
+  /* 启用硬件加速 */
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+
+  /* 防止WebKit动画闪烁 */
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  /* 设置透视，改善3D变换性能 */
+  -webkit-perspective: 1000px;
+  perspective: 1000px;
+
+  /* 优化动画性能 */
+  will-change: transform, opacity;
+
+  /* 强制创建新的层叠上下文 */
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+
+  /* 确保动画平滑 */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 为子元素提供动画优化 */
+.webkit-animation-fix * {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+/* 特别优化hover状态的性能 */
+.webkit-animation-fix:hover {
+  /* 在hover时明确设置will-change */
+  will-change: transform, opacity, filter;
+}
+
+/* 避免不必要的重绘 */
+.webkit-animation-fix:not(:hover) {
+  will-change: auto;
+}
+
+/* 播放logo WebKit修复 - 精确控制fill动画避免闪烁 */
+.play-icon-fixed {
+  --icon-fill: transparent;
+  --icon-opacity: 0.8;
+  --icon-scale: 1;
+
+  color: white;
+  fill: var(--icon-fill);
+  opacity: var(--icon-opacity);
+  transform: scale(var(--icon-scale));
+
+  /* 分别控制每个属性的动画时长，避免WebKit闪烁 */
+  transition: fill 0.25s ease-out, opacity 0.25s ease-out,
+    transform 0.25s ease-out;
+
+  /* WebKit硬件加速和防闪烁 */
+  -webkit-transform: scale(var(--icon-scale)) translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform, fill, opacity;
+}
+
+.play-icon-fixed:hover {
+  --icon-fill: rgb(34, 197, 94); /* green-500 */
+  --icon-opacity: 1;
+  --icon-scale: 1.1;
+}

src/components/VideoCard.tsx

@@ -237,7 +237,7 @@ export default function VideoCard({
 
   return (
     <div
-      className='group relative w-full rounded-lg bg-transparent transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.02]'
+      className='group relative w-full rounded-lg bg-transparent transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.02] webkit-animation-fix'
       onClick={handleClick}
     >
       {/* 海报容器 */}
@@ -264,7 +264,7 @@ export default function VideoCard({
             <PlayCircleIcon
               size={52}
               strokeWidth={1}
-              className='text-white transition-all duration-300 transform hover:scale-110 hover:fill-green-500 rounded-full cursor-pointer opacity-80 hover:opacity-100'
+              className='rounded-full cursor-pointer play-icon-fixed'
             />
           )}