Safari隐藏滚动条后容器变宽，是因为iOS Safari（尤其16前）根本不渲染滚动条且不预留空间；强行使用::-webkit-scrollbar会触发伪元素占位或重绘异常，导致布局偏移。
为什么 Safari 隐藏滚动条后容器宽度突然变宽？
这不是“占位”，而是 Safari（尤其 iOS 16 前）压根不渲染滚动条，也**不预留空间**；当你用 ::-webkit-scrollbar 强行干预时，部分版本会回退到“渲染一个不可见但占布局空间”的伪滚动条，导致内容区域被意外压缩或重排。
Safari 中 ::-webkit-scrollbar 的 width: 0 为何不生效？
iOS Safari（所有版本）完全忽略 ::-webkit-scrollbar 系列伪元素——它不是“隐藏失败”，是根本没解析。你写的 width: 0、display: none 全部被跳过，浏览器按默认逻辑处理：无 UI、无占位、也不响应 CSS 控制。
- 别在 iOS Safari 上调试
::-webkit-scrollbar规则，它不会生效，还可能触发重绘异常 - macOS Safari 17.4+ 才开始有限支持
width: 0，但必须同时声明::-webkit-scrollbar-track和::-webkit-scrollbar-thumb - 若看到“占位”，大概率是父容器用了
overflow: hidden或flex布局导致子项收缩，而非滚动条本身占位
Firefox 和 Chrome 里 scrollbar-width / ::-webkit-scrollbar 生效，但 Safari 不行，怎么办？
这不是 bug，是平台策略差异：Safari 移动端默认不显示滚动条 UI，也不提供 CSS 干预入口；Chrome/Edge on iOS 是 WebKit 封装层，却继承了 Blink 的伪元素支持，行为反而更接近 Android Chrome。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- Firefox 只认
scrollbar-width: none，且只对设置了overflow-y: auto和明确height/max-height的容器生效 - Chrome/Edge（含 iOS 版）需三件套：
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb，全设width: 0; height: 0; background: transparent - Safari 的“无滚动条”是原生状态，无需隐藏——强行加规则反而破坏稳定性，比如某些 iOS 15.4 版本会在
position: absolute容器中触发拖拽失效
真正要防的不是滚动条占位，而是布局偏移
隐藏滚动条后最常出问题的，是竖屏转横屏、软键盘弹起、或动态加载内容时，容器宽度因滚动条消失而突变，导致文字换行错乱、按钮错位、甚至触控热区偏移。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖固定
padding-right: 16px补偿——iOS 滚动条宽度不固定，且 Safari 根本不占位 - 更稳妥的是用 JS 动态检测：
element.offsetWidth - element.clientWidth，仅在非 Safari 环境下补偿 - 避免把隐藏规则写在
body或html上，必须限定到具体滚动容器，比如.chat-list或.modal-content
移动端 Safari 对滚动条的“不可见”是设计使然，不是缺陷；试图用 CSS 强行统一各平台表现，反而容易踩进 touch-action 被禁用、拖拽失灵、或键盘弹起后无法滚动的坑。
