CSS循环跑马灯动画在iPhone上每1/4周期跳变闪烁求助

问题分析 #

你用CSS text-shadow生成3份重复文本实现循环跑马灯，动画在常规环境正常，但在iPhone X（iOS15.5）和Chrome中，每到1/4周期节点（文本位于容器0%/25%/50%/75%位置时）出现跳变闪烁。试过-webkit-backface-visibility、translate3d等常规修复无效，核心原因大概率是WebKit内核对text-shadow的动画合成存在渲染bug：当元素transform到关键对齐节点时，阴影文本的像素对齐计算出现异常，导致闪烁。

可行解决方案 #

放弃text-shadow，改用复制真实DOM元素实现重复文本，浏览器对真实元素的transform动画优化更彻底，能避免阴影合成的兼容性问题。

修改后的代码示例 #

CSS

:root {
  --color-primary: black;
}

.wrapper {
  max-width: 1000px;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee .marquee-content {
  display: flex;
  animation: var(--marquee-duration) linear infinite marquee;
}

.marquee .page-title {
  flex: 0 0 var(--marquee-width);
  white-space: nowrap;
  margin: 0;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

HTML

<div class="wrapper">
  <div class="marquee" style="--marquee-width: 640px; --marquee-duration: 6.4s;">
    <div class="marquee-content">
      <h1 class="page-title">Hello... is it me you're looking for?</h1>
      <h1 class="page-title">Hello... is it me you're looking for?</h1>
      <h1 class="page-title">Hello... is it me you're looking for?</h1>
      <h1 class="page-title">Hello... is it me you're looking for?</h1>
    </div>
  </div>
</div>

方案说明 #

1. 用flex容器包裹4份相同的文本元素，每个文本宽度设为--marquee-width
2. 对flex容器应用translateX动画，从0到-100%，刚好让一组完整的文本循环滚动
3. 真实DOM元素的transform动画由浏览器的合成线程直接处理，不会触发text-shadow的渲染异常

其他可选尝试（优先级低于上述方案） #

• 调整动画终点：将100% { transform: translateX(-100%); }改为100% { transform: translateX(-99.9%); }，避免精确对齐节点触发bug，但可能导致循环衔接不完美
• 给文本元素添加will-change: transform，提示浏览器提前优化动画渲染

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