Firefox中background-position动画卡顿问题求助

Firefox对background-position的慢速动画处理容易出现跳帧，核心原因是该属性动画会触发频繁的页面重绘，而Chrome/Edge的渲染优化机制对这类场景支持更完善。改用transform: translate()动画（GPU加速属性）可以彻底解决这个问题——transform在GPU层面处理，不会触发重绘，即使长时长动画也能保持流畅。

修改后的代码 #

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="img-background-horizontal">
      <div class="bg-inner"></div>
    </div>
  </body>
</html>

CSS

body {
  padding: 0;
  margin: 0;
}

.img-background-horizontal {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.bg-inner {
  background-image: url("https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346_1280.jpg");
  background-size: cover;
  height: 120vh; /* 比容器高20%，匹配原动画的纵向偏移效果 */
  width: 105vw;
  position: absolute;
  top: 0;
  left: 0;
  animation: horizontalMove 50s infinite ease;
}

@keyframes horizontalMove {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-5vw, -20vh); /* 左移5vw抵消宽度差，上移20vh匹配原20%纵向偏移 */
  }
  100% {
    transform: translate(0, 0);
  }
}

关键调整说明 #

1. 嵌套内部元素：将背景图放在独立的内部容器中，通过移动这个元素代替修改background-position。
2. GPU加速动画：transform: translate()属于GPU加速属性，Firefox对这类动画的帧率控制更稳定，长时长场景下不会出现跳帧。
3. 匹配原视觉效果：内部元素宽度设为105vw（和原background-size一致），高度设为120vh，动画时左移-5vw抵消宽度差，上移-20vh匹配原动画的纵向偏移，保证视觉效果和原代码完全一致。

如果需要更精准匹配原background-position的百分比逻辑，可将transform数值改为百分比形式：

@keyframes horizontalMove {
  0% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(calc(-5vw / 1.05), -20%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

内容的提问来源于stack exchange，提问作者Antón Gómez López