加了 -webkit-overflow-scrolling: touch 会白屏，是因 ios safari 渲染机制缺陷：当元素同时满足 overflow-y: scroll/auto、启用该属性且父容器存在 transform/opacity/filter 等合成层属性时，webkit 可能丢弃绘制上下文，导致内容区域空白，触屏后才恢复。
为什么加了 -webkit-overflow-scrolling: touch 会白屏？
这不是 CSS 写错了，而是 iOS Safari 的一个已知渲染机制缺陷：当元素同时满足「有 overflow-y: scroll/auto」+「设置了 -webkit-overflow-scrolling: touch」+「父容器存在 transform 或 opacity 等合成层触发属性」时，WebKit 可能会在页面首次渲染或返回时丢弃该区域的绘制上下文，导致内容区域空白——触一下屏幕才恢复。这个白屏不报错、不中断 JS，纯属渲染管线“失联”。
哪些场景最容易触发这个白屏？
常见于以下组合：
- 使用
transform: translateZ(0)或will-change: transform强制开启硬件加速的滚动容器 - 父级用了
opacity: 0.99（哪怕不是 1）、filter: blur(1px)等半透明/滤镜效果 - 滚动区域嵌套在
position: fixed或position: sticky容器里，且该容器本身有 transform - Vue/React 组件在
v-if或useState切换后动态插入带该样式的滚动区
怎么安全地保留滚动惯性又不白屏？
放弃 -webkit-overflow-scrolling: touch 是最稳妥的选择。iOS 15+ 已默认启用平滑滚动，无需 hack；而 iOS 14 及更早版本，可用以下降级方案：
- 删掉所有
-webkit-overflow-scrolling: touch声明，只保留overflow-y: auto - 对滚动容器加
scroll-behavior: smooth（兼容 iOS 15.4+） - 若必须支持老 iOS 的惯性滚动，改用
touch-action: pan-y+overscroll-behavior: contain配合原生滚动监听做轻量交互增强 - 避免在滚动容器父级上写
transform、opacity、filter；如需视觉动效，移到子元素或伪类上
真遇到白屏，临时补救怎么做？
如果无法立刻改样式，可在页面可见后强制重绘滚动区域：
const scrollEl = document.querySelector('.scroll-container');
if (scrollEl) {
// 触发一次 layout 强制重绘
scrollEl.style.transform = 'translateZ(0)';
setTimeout(() => {
scrollEl.style.transform = '';
}, 10);
}
注意：不要在 mounted 或 useEffect 里直接操作 DOM，得等元素真正挂载且尺寸稳定后再执行，否则可能无效。iOS 白屏的本质是合成层未就绪，不是 JS 执行慢——这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
