移动端背景图片CSS滚动动画失效问题求助

问题根源 #

你用到的animation-timeline: view()是CSS滚动驱动动画特性，目前移动端主流浏览器支持度极低——桌面Chrome及响应式视图能生效是因为桌面端已完善支持该特性，但移动端尚未跟进，直接导致手机端无法触发背景动画。

解决方案 #

方案1：JavaScript滚动监听（兼容性最优） #

通过监听滚动事件，根据滚动进度动态修改背景样式，实现和原CSS动画一致的效果，适配所有设备：

const body = document.body;
// 计算可滚动的总高度
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;

window.addEventListener('scroll', () => {
  // 滚动进度（0到1）
  const progress = window.scrollY / scrollableHeight;
  
  let bgSize, bgPosition;

  // 对应原关键帧的区间逻辑
  if (progress <= 0.25) {
    bgSize = '300%';
    bgPosition = 'center';
  } else if (progress <= 0.33) {
    // 从300%平滑过渡到400%
    const sizeRatio = (progress - 0.25) / (0.33 - 0.25);
    bgSize = `${300 + 100 * sizeRatio}%`;
    bgPosition = 'right center';
  } else if (progress <= 0.66) {
    bgSize = '400%';
    bgPosition = '40% center';
  } else {
    // 从400%平滑过渡到600%
    const sizeRatio = (progress - 0.66) / (1 - 0.66);
    bgSize = `${400 + 200 * sizeRatio}%`;
    bgPosition = 'top center';
  }

  // 应用样式
  body.style.backgroundSize = bgSize;
  body.style.backgroundPosition = bgPosition;
});

同时修改CSS，移除原动画属性，保留基础背景设置：

body {
    min-height: 100vh;
    background: url(./sebastian-svenson-d2w-_1LJioQ-unsplash.jpg) no-repeat center center fixed;
    background-color: hsl(214, 34%, 13%);
    background-size: 300%; /* 初始状态对应原关键帧0% */
}

方案2：CSS特性检测降级 #

用@supports做特性检测，仅在支持滚动驱动动画的浏览器启用原动画，不支持时显示静态样式：

body {
    min-height: 100vh;
    background: url(./sebastian-svenson-d2w-_1LJioQ-unsplash.jpg) no-repeat center center fixed;
    background-color: hsl(214, 34%, 13%);
    background-size: cover;
}

/* 仅支持动画特性的浏览器生效 */
@supports (animation-timeline: view()) {
  body {
    animation: zoom linear;
    animation-timeline: view();
  }
}

@keyframes zoom {
    0%,25% {
        background-size: 300%;
        background-position: center;
    }
    33% {
        background-size: 400%;
        background-position: right center;
    }
    66% {
        background-size: 400%;
        background-position: 40% center;
    }
    100% {
        background-size: 600%;
        background-position: top center;
    }
}

补充说明 #

• 移动端浏览器对CSS滚动驱动动画的支持仍在迭代中，纯CSS方案需等待后续版本更新；
• JS方案虽需额外代码，但能确保全设备一致生效，更适合生产环境。

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