iOS上overflow:hidden+transform失效非bug，是渲染层未激活致裁剪仅作用于主文档流；加transform:rotate(0deg)或translateZ(0)可强制父容器升格为合成层，使裁剪绑定GPU路径。
overflow: hidden 为什么在 transform 下失效
不是 overflow: hidden 失效，而是它没作用到该作用的地方。当子元素用了 transform（比如 scaleX(0)、rotate(90deg)、translateX(100px)），父容器若仅靠 overflow: hidden + border-radius，在 Safari/iOS 上大概率裁剪失败——因为浏览器没为这个父容器创建独立合成层，裁剪逻辑被跳过。
常见现象包括：圆角图片右上角直角穿出、旋转图覆盖相邻元素、scaleX(0) 后背景图堆在左上角、下拉菜单悬停后点击无响应。
- 根本原因是渲染层未激活，不是 CSS 写错了
-
overflow: hidden本身仍生效，但它只裁剪“主文档流”内容，不约束 GPU 渲染层里的变换元素 - Chrome 某些版本表现正常，但 iOS Safari 和微信 WebView 几乎必现
加 transform: rotate(0) 还是 translateZ(0)
必须加在设置了 overflow: hidden 和 border-radius 的**父容器**上，子元素加无效，甚至干扰动画。
推荐顺序（按兼容性与稳定性排序）：
立即学习“前端免费学习笔记（深入）”；
-
transform: rotate(0deg)—— 兼容 IE9+，零副作用，Safari 动画场景首选 -
transform: translateZ(0)—— 效果等价，但部分 Android WebView 对Z轴敏感，偶发抖动 -
will-change: transform—— 不推荐单独用，某些旧版微信会忽略，且可能触发过度图层提升
别混用：-webkit-backface-visibility: hidden 单独加无效；和 translate3d(0,0,0) 配合虽稳定，但在 iOS 微信某些版本中会禁用 CSS 动画，慎用。
background-image 在 scaleX(0) 下乱跑怎么办
这不是 bug，是 transform 不创建新包含块 + position: static 导致背景图锚点回退到最近已定位祖先，多个元素共用一个定位参考点，于是全堆在 .projects 左上角。
两个可靠解法（选其一）：
- 给带背景的元素（如
.project .img）加overflow: hidden—— 强制创建 BFC，把背景图锁死在盒内，不依赖定位上下文 - 给父容器（如
.project）加position: relative—— 让每个子元素的 background-image 相对自身父级定位，避免向上回溯
注意：visibility: hidden 或 opacity: 0 不能替代 scaleX(0)，前者不保留缩放动画所需的视觉坐标系，交互反馈会断层。
滚动容器里用 transform 就卡住或滚不到顶
典型场景是模态框居中：top: 50% + left: 50% + transform: translate(-50%, -50%)。问题在于 transform 移动的是视觉位置，但滚动容器（如 .fade）的可滚动区域仍按原始布局边界计算，导致顶部内容被裁掉、无法滚动到最上方。
解决方向很明确：
- 去掉
transform，改用margin或inset（CSS Logical Properties）居中 - 或者把
overflow: scroll移到.content内部容器，而不是外层遮罩层 - 绝对不要在滚动父容器上同时用
transform和overflow—— 这是冲突根源
真正容易被忽略的是：哪怕只是给滚动容器加了个 transform: rotate(0) 来修圆角，也可能意外破坏滚动锚点。这类“补丁叠加”要格外小心，优先用语义清晰的布局方案替代 hack。
