真正稳定的做法是用 section 容器 + position: fixed 层叠 + transform: translatez(0) 触发合成层，配合 js 控制显隐或位移；background-attachment: fixed 在移动端失效是因系统为省电主动限制；scrollintoview 比 hash 跳转更可靠；优先用 transform 位移而非 opacity 切换；确保每帧落在合成层上。
直接说结论：全屏幻灯片背景切换不是“把图片塞进 body 然后加 background-size: cover”就完事的——那样在 iOS Safari 会失焦、在 Chrome 滚动时闪白、在低端 Android 上掉帧。真正稳定的做法，是用 section 做容器 + position: fixed 层叠 + transform: translateZ(0) 触发合成层，再配合 JS 控制显隐或位移。
为什么 background-attachment: fixed 在移动端基本失效
这不是 bug，是 Safari（尤其是 iOS 15+）和部分 Android WebView 的主动限制：为节省功耗和内存，它们会禁用 background-attachment: fixed，并回退为滚动跟随效果。你看到的“卡顿”“跳变”“白屏”，往往就是这个回退在作祟。
- 检查方式：打开 Chrome DevTools → Rendering → 勾选 “Layer borders”，滑动时若背景图没独立图层，说明没生效
- 替代方案：每个全屏区块用
<section class="slide"><img src="bg.jpg" alt=""></section>，img设为position: absolute; width: 100%; height: 100%; object-fit: cover; - 必须加
will-change: transform或transform: translateZ(0)到section上，否则 GPU 不接管渲染
用 scrollIntoView 实现“一屏一停”比 hash 跳转更可靠
很多人用 <a href="#slide2"></a> 配合 id="slide2"，但这样会污染 history、无法监听滚动结束、且 Safari 对 scroll-behavior: smooth 的 block: 'start' 支持不一致。
- 正确写法：
document.querySelector('#slide2').scrollIntoView({ behavior: 'smooth', block: 'start' }); - 触发按钮建议用
<button data-slide="2">下一页</button>，避免 href 干扰语义 - 滚动完成后，手动调用
section.focus({ preventScroll: true })，确保键盘用户焦点落到新页首个可聚焦元素（如<h1></h1>或<button></button>） - 别忘了给
html, body { scroll-behavior: smooth; }，这是开启原生平滑滚动的前提
纯 CSS 轮播慎用 opacity 切换，优先用 transform 位移
在 iOS Safari 上，opacity 动画容易出现渲染残留（边缘发白、闪帧），尤其当背景图带渐变或半透明文字时。这不是 CSS 写错了，而是 WebKit 渲染管线对透明度动画的优化不足。
- 推荐结构：所有
section.slide水平排列，父容器overflow: hidden，宽度 =100vw × 图片数 - 切换靠
transform: translateX(-N%)，比如第 3 张对应translateX(-200%) - 必须加
will-change: transform到父容器，提前通知浏览器该元素将参与合成 - 动画函数用
linear，别用ease——后者会让位移速度不均，看起来像卡顿
最常被忽略的点：全屏幻灯片不是“视觉动效越炫越好”，而是“每一帧都得落在合成层上”。一旦触发重排（比如改 width 或 top）、或强制软件渲染（比如用了 box-shadow + rgba() 背景叠加），60fps 就立刻崩成 30fps。先开 DevTools 的 Rendering 面板看绿色闪烁区，再动手调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
