Safari中overflow:hidden失效是因父容器未激活独立渲染层，加transform:rotate(0deg)可强制创建合成层修复；若含transition或hover缩放，须用-webkit-mask+mask双声明并匹配border-radius值；祖先元素的overflow设置也会穿透干扰，需逐级排查并替换为overflow:clip或添加will-change:transform。
这个问题在 Safari（尤其是 iOS 15.4+ 和 macOS 14+）中不是样式没写对，而是裁剪逻辑被静默跳过——overflow: hidden 失效的根源在于父容器没激活独立渲染层，border-radius 就失去了裁剪锚点。直接加 transform: rotate(0deg) 是最轻量、兼容性最好的解法。
为什么 transform: rotate(0deg) 能修
它不改变视觉，但强制浏览器为该元素创建新的合成层（compositing layer），让 overflow: hidden 的裁剪范围严格绑定到 GPU 渲染路径上。子元素一旦用了 transform、scale() 或 transition，没有这个层，Safari 就会“松开”圆角边界，内容直接溢出。
- 必须加在设置了
border-radius和overflow: hidden的**父容器**上，子元素加无效 - 若已用
transform: translateZ(0)或will-change: transform，不用重复加 - 避免和
-webkit-backface-visibility: hidden混用，某些 iOS 微信版本会禁用动画
动画/悬停场景下必须用 -webkit-mask
当有 transition 或 hover 缩放时，rotate(0deg) 可能只缓解、不根治。此时 WebKit 原生遮罩是唯一稳解：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
-webkit-mask和mask必须同时声明，缺一不可 - 遮罩半径要和
border-radius数值完全一致，比如border-radius: 12px→radial-gradient(... #000 12px, transparent 12px) - 必须配
mask-size: 100% 100%和mask-repeat: no-repeat，否则缩放时遮罩偏移 - 保留
overflow: hidden作为其他浏览器的降级 fallback
祖先 overflow 会穿透干扰，得逐级排查
哪怕目标元素样式完全正确，只要任意祖先（比如 .modal-overlay、.page-wrapper，甚至锁屏时加在 body 上的 overflow: hidden）设了 overflow: hidden 或 auto，Safari 就把它当“硬裁剪边界”，直接截断子元素圆角渲染。
立即学习“前端免费学习笔记（深入）”；
- 排查命令：
getComputedStyle($0.parentElement).overflow，从目标元素向上逐级执行 - 修复不是改目标元素，而是给它加
will-change: transform脱离该上下文 - 或把祖先的
overflow: hidden换成overflow: clip（iOS Safari 16.4+ 支持）
真正容易被忽略的是：问题常不在你写的那行 border-radius 上，而在往上三五层的某个全局锁屏样式或弹窗容器里。别只查 DevTools 里高亮的元素，真机上跑一遍 getComputedStyle 才算落地。
