加transform: rotate(0deg)到父容器是最稳定解法，因其强制创建合成层，使overflow:hidden裁剪绑定GPU路径，解决Safari/Chrome中子元素transform动画时圆角溢出问题。
加 transform: rotate(0deg) 到设置了 border-radius 和 overflow: hidden 的父容器上，是目前最稳定、兼容性最好、副作用最小的解法。
为什么 transform: rotate(0deg) 能修
这不是玄学，是 WebKit 渲染层（compositing layer）触发机制问题。当父容器只有 border-radius 和 overflow: hidden，但没创建独立合成层时，Safari 在子元素执行 transform（如 scale、translate3d）或 transition 过程中，会临时“松开”裁剪逻辑——内容就从圆角边缘溢出。
transform: rotate(0deg) 不改变视觉，但强制浏览器为该元素创建新图层，让裁剪范围严格绑定到图层边界内，和 GPU 渲染路径对齐。
- 必须作用于父容器，不是子元素；子元素加完全无效
- 已用
transform: translateZ(0)或will-change: transform的，不用重复加 - 在 iOS 15.4+、macOS 14+、微信 WebView 中效果最明显
动画/悬停场景下 overflow: hidden 仍破框怎么办
当有 transition 或 hover 缩放时，仅靠 transform: rotate(0deg) 可能不够稳——WebKit 在过渡帧中仍可能跳过裁剪。此时必须用 -webkit-mask 做底层遮罩。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 写法必须同时声明：
-webkit-mask和mask，缺一不可 - 圆角值要一致：比如
border-radius: 12px，遮罩就得写12px，单位不能省 - 必须配
mask-size: 100% 100%和mask-repeat: no-repeat，否则缩放时遮罩偏移 - 保留
overflow: hidden作为其他浏览器的降级 fallback
祖先元素的 overflow 会穿透干扰
哪怕目标元素样式完全正确，只要它的任意一个祖先（比如 .modal-overlay、.page-wrapper，甚至锁屏时加在 body 上的 overflow: hidden）设置了 overflow: hidden 或 overflow: auto，Safari 就会把它当作“硬裁剪边界”，直接截断子元素的圆角渲染。
- 排查方式：在 DevTools 控制台逐级执行
getComputedStyle($0.parentElement).overflow - 修复不是改目标元素，而是给它加
will-change: transform脱离该上下文 - 或把祖先的
overflow: hidden换成overflow: clip（iOS Safari 16.4+ 支持）
别忽略背景与 background-clip
即使裁剪逻辑生效了，如果元素用了渐变或图片背景，但没设 background-clip: padding-box，背景会默认铺满 border-box 区域，把圆角边缘“撑平”或模糊掉，看起来像圆角没起作用。
- 纯色背景通常没问题；带图/渐变的必须加
background-clip: padding-box - 避免用
background-clip: content-box，它会让圆角区域完全透明 - 伪元素（如
::before）若覆盖主元素且自身没设圆角，也会掩盖真实效果
真正容易被忽略的是：问题往往不在你写的那行 border-radius 上，而在向上三到四层的祖先样式里，或者在背景渲染细节中。别只盯着目标元素查，得一层层往上摸，再低头看背景怎么画的。
