页面完成加载之前，div 动画上出现不需要的背景

Question

我花了几个小时却找不到解决办法

在此网站上 https://2sync.com 我的文本动画出现奇怪的蓝色背景，该背景在页面加载后消失。

这是一个 GIF：

我在 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>

Answer 1

我可能离题了，但你有没有尝试过像将 SCSS 转换为 CSS 这样的创可贴？它对我有用，但可能不适用于你的情况。