页面加载完成前Div动画出现异常蓝色背景问题求助

• 在2sync.com网站上，页面加载完成前，滚动文本动画会出现奇怪的蓝色背景，加载完成后该背景消失。
• 问题仅出现在Arc浏览器版本1.30.0（46409）（基于Chromium 121.0.6167.184内核）。
• 仅生产环境存在此问题，开发环境无法复现；移除动画后问题解决，但希望保留动画效果。

SCSS代码 #

.scrolling-words-box {
  display: inline-block;
  height: 3rem;
  margin: auto;
  overflow: hidden;
  user-select: none;
  transform: translateY(10px);

  ul {
    padding: 0;
    animation: text-scroll-up 8s infinite;

    li {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 3rem;
      list-style: none;
    }
  }
}

// Variables
$item-count: 4;

@keyframes text-scroll-up {
  @for $i from 1 through ($item-count - 1) {
    #{($i * 25) - 10%}, #{$i * 25%} {
      transform: translateY(((-100% / $item-count) * $i));
    }
  }
}

HTML代码 #

<div class="scrolling-words-box">
    <div class="scrolling-words-content">
      <ul>
        <li style="color: #ea4335;">
          Todoist
        </li>
        <li style="color: #4285f4;">
          Calendar
        </li>
        <li style="color: #34a853;">
          Emails
        </li>
        <li style="color: #fbbc04;">
          Contacts
        </li>
      </ul>
    </div>
  </div>

这种预加载阶段的异常背景通常由浏览器渲染优化或样式加载顺序导致，以下是几种针对性解决方案：

1. 设置容器明确背景色
   在.scrolling-words-box或.scrolling-words-content中添加与页面背景一致的背景色，覆盖浏览器默认渲染的异常背景：

.scrolling-words-box {
  // 保留原有样式
  background-color: #fff; // 替换为页面实际背景色
}

2. 延迟动画启动
   通过animation-delay让动画在页面加载完成后再启动，避开预加载阶段的渲染异常：

ul {
  padding: 0;
  animation: text-scroll-up 8s infinite;
  animation-delay: 0.5s; // 延迟0.5秒启动，可根据实际调整
}

3. 通过加载状态控制动画可见性
   先隐藏动画容器，页面加载完成后再显示，结合JS实现：

.scrolling-words-box ul {
  visibility: hidden;
}

.loaded .scrolling-words-box ul {
  visibility: visible;
  animation: text-scroll-up 8s infinite;
}

页面加载完成时给根元素添加状态类：

window.addEventListener('load', () => {
  document.documentElement.classList.add('loaded');
});

4. 优化动画渲染性能
   添加will-change提示浏览器提前优化动画渲染，减少异常：

ul {
  padding: 0;
  animation: text-scroll-up 8s infinite;
  will-change: transform;
}

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