React项目CSS动画在Safari移动端加载过慢问题咨询

在React项目中实现了一个div向上滚动的CSS动画，该动画在Safari移动端加载完整效果耗时超2分钟，表现分为三个阶段：

• 初始阶段：后端数据全部加载，元素可正常显示；
• 中间阶段：接下来2分钟内数据反复出现又消失；
• 最终阶段：所有内容加载完成并正常运行。

该动画在桌面端运行正常，Chrome移动端仅需5秒即可加载完成。相关代码如下：

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.gridcontainer {
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;
}
.outer {
  overflow: hidden;
  height: 400px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.inner {
  animation: move 10s linear infinite;
  rposition: relative;
  height: fit-content;
  
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.grid {
  display: grid;
  gap: 2vw;
  justify-content: space-around;
  height: fit-content;
}

.grid--1x3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
}

HTML结构 #

<div class="outer">
<div class="inner">
  <div class='grid grid--1x3'>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

  </div>
  <div class='grid grid--1x3'>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

  </div>
</div>
</div>

提问 #

CSS动画在Safari中是否存在兼容性问题？有什么fallback方案能确保数据始终正常加载？

一、Safari中的兼容性问题分析 #

你遇到的问题确实和Safari的CSS动画渲染特性有关，核心原因包括：

• fit-content计算延迟：Safari移动端对嵌套grid/flex布局元素的height: fit-content计算效率极低，结合动画会触发反复重排重绘，导致元素闪烁、加载卡顿；
• GPU加速逻辑差异：Chrome会自动对transform动画启用GPU加速，但Safari对复杂子布局元素的动画加速触发更严格，容易陷入CPU密集型的重排循环；
• 无效属性干扰：原CSS中.inner类的rposition是无效笔误，虽不直接引发问题，但会干扰浏览器的布局解析逻辑。

二、Fallback方案（保障内容可用性+动画兼容） #

1. 修复基础布局问题 #

• 修正.inner类的笔误，将rposition改为position: relative;
• 给.inner添加明确尺寸约束，避免Safari反复计算fit-content，同时强制开启GPU加速：

  .inner {
    animation: move 10s linear infinite;
    position: relative;
    height: auto;
    min-height: 800px; /* 根据实际内容高度调整 */
    transform: translateZ(0);
    will-change: transform;
  }
  

2. 针对Safari的动画延迟启动 #

通过CSS特性检测，先稳定布局再启动动画，避免布局未就绪时触发重排：

/* 针对Safari移动端的特殊处理 */
@supports (-webkit-touch-callout: none) {
  .inner {
    animation: none;
  }
}

搭配React组件的延迟逻辑，等待数据渲染+布局稳定后再启用动画：

import { useEffect, useRef } from 'react';

const AnimatedScroll = () => {
  const innerRef = useRef(null);

  useEffect(() => {
    // 等待布局稳定后启动动画
    const timer = setTimeout(() => {
      innerRef.current?.classList.add('animate-move');
    }, 100);

    return () => clearTimeout(timer);
  }, []); // 若依赖后端数据，将数据状态加入依赖数组

  return (
    <div className="outer">
      <div ref={innerRef} className="inner">
        {/* 你的内容结构 */}
      </div>
    </div>
  );
};

对应的CSS调整：

.inner {
  position: relative;
  height: auto;
  min-height: 800px;
  transform: translateZ(0);
  will-change: transform;
}

.animate-move {
  animation: move 10s linear infinite;
}

3. 极端情况：Safari直接禁用动画 #

若上述方案仍无法解决，优先保障内容可用性，给Safari用户禁用动画：

@supports (-webkit-touch-callout: none) {
  .inner {
    animation: none;
    overflow-y: auto;
    height: 400px;
  }
}

三、额外优化建议 #

• 简化.gridcontainer的内外边距规则，减少不必要的布局计算；
• 用CSS变量统一管理grid的列数、间距，降低浏览器解析成本；
• 使用Safari Web Inspector的「Layout」「Paint」面板，查看重排重绘频率，定位具体性能瓶颈。

内容的提问来源于stack exchange，提问作者Newbie_developer