应优先使用 clip-path 或 overflow: clip 替代 overflow: hidden 实现裁剪，因其不触发合成层、避免显存浪费与性能损耗；仅在兼容旧版 iOS 时谨慎保留 overflow: hidden 并隔离影响。
直接用 overflow: hidden 做裁剪，常会意外触发合成层（compositing layer），尤其在 Safari 和部分安卓 WebView 中——这看似“安全”的写法，实则悄悄占用显存、拖慢滚动、甚至让动画卡顿。真正要优化的，不是“怎么藏住内容”，而是“怎么不为裁剪付出渲染代价”。
为什么 overflow: hidden 会偷偷升层？
浏览器对 overflow: hidden 的实现并非纯逻辑裁剪。当它检测到内容可能溢出（比如有绝对定位子元素、transform 动画、或含滚动上下文），就会主动创建一个独立合成层来确保裁剪边界精确生效。这个层一旦生成，就长期驻留 GPU 显存，哪怕内容静止不动。
- iOS Safari 对
overflow: hidden容器内含position: absolute元素时，几乎必定升层 - Chrome 在某些复合样式组合（如
overflow: hidden+will-change: transform）下会重复创建图层 - 每个被升层的容器，若含高清图或 Canvas，显存占用可达数十 MB，百个列表项就能吃掉数 GB
用 clip-path 替代 overflow: hidden
clip-path 是 CSS 中最接近“纯裁剪语义”的属性：它只定义可见区域形状，不参与布局计算，也不自动触发合成层（除非你额外加 transform 或 opacity）。对竖直方向裁剪需求，推荐写法：
.clip-vertical {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
若需仅裁剪顶部/底部/左右某侧，可灵活调整多边形顶点坐标，例如只裁剪上边和下边、保留左右溢出：
.clip-top-bottom {
clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0 100%);
}
注意：避免使用 clip-path: inset() 配合百分比值（兼容性差），优先用 polygon() + 绝对或大范围数值（如 -9999px）更稳定。
用 overflow: clip 替代 overflow: hidden
CSS 新标准 overflow: clip 是专为“无副作用裁剪”设计的。它语义明确、不触发合成层、不建立新的层叠上下文，且已获 Chrome 94+、Firefox 97+、Safari 16.4+ 支持。
- 写法完全一致：
overflow: clip可直接替换现有overflow: hidden - 对 fixed/absolute 子元素无裁剪干扰（
hidden会剪，clip不会） - 配合
contain: layout paint可进一步限制重排重绘范围
必要时保留 overflow: hidden，但隔离其影响
若因兼容旧版 iOS（overflow: hidden，可通过结构隔离避免扩散升层：
- 把
overflow: hidden移到最外层“纯容器”，内部动画/浮层元素移出该容器（如挂载到body） - 用
transform: translateZ(0)或will-change: transform主动控制哪些元素升层，而非依赖hidden被动触发 - 禁用父级
overflow: hidden后，若仍需视觉裁剪，改用mask-image（配合透明 PNG）作为轻量替代
