ios上overflow:hidden+border-radius失效非bug，是渲染层未激活致裁剪逻辑被跳过；加transform:rotate(0deg)或translatez(0)可强制父容器升格为合成层，使裁剪绑定gpu路径。
不是 CSS 写错了，也不是 border-radius 没生效，而是 iOS Safari（及多数 WebKit WebView）在特定条件下跳过了 overflow: hidden 的裁剪逻辑——尤其当父容器没触发独立合成层时，圆角区域的内容会“漏出来”。
为什么 overflow:hidden + border-radius 在 iOS 上不裁剪
根本原因不是样式失效，是 WebKit 渲染机制：当父容器只有 border-radius 和 overflow: hidden，但未创建独立的合成层（compositing layer）时，浏览器不会将裁剪绑定到 GPU 路径，导致绝对定位、transform、opacity 等子元素直接逃逸出裁剪边界。
常见表现包括：
- 轮播图箭头从圆角右上角顶出
- 带
transform: translateY(-4px)的 Tooltip 整个飘到容器外 - 图片首帧解码后短暂冲破圆角（iOS 特有）
加 transform: rotate(0deg) 为什么能修
它不改变视觉，但强制父容器升格为合成层，使 overflow: hidden 的裁剪范围严格限定在该图层边界内，和硬件加速路径对齐。
实操要点：
- 必须加在设置了
border-radius和overflow: hidden的父容器上，子元素加无效 - 推荐写法：
transform: rotate(0deg)—— 兼容性最好（IE9+），无副作用，Safari 动画场景首选 - 避免和
-webkit-backface-visibility: hidden混用，某些 iOS 微信版本会意外禁用动画 - 若父容器已用
transform: translateZ(0)或will-change: transform，无需重复加
哪些情况光加 transform 也不够
当涉及 <video></video>、小程序原生组件或 Safari 中的 transition 动画时，transform 只能缓解，不能根治。
需组合其他手段：
-
<video></video>必须由其**直接父容器**设border-radius+overflow: hidden，且确保容器尺寸 ≥ 实际渲染尺寸（object-fit: cover时特别注意） - Safari 下悬停动画破框：改用
-webkit-mask，例如-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px)，并配mask-size: 100% 100% - 小程序 iOS XR 等老机型：需同时加
-webkit-backface-visibility: hidden和-webkit-transform: translate3d(0,0,0)，单写无效
真正容易被忽略的是：问题往往不在目标元素本身，而在向上数 3–4 层的祖先容器是否悄悄加了 overflow: hidden —— 尤其是全局弹窗锁屏时塞在 body 上的那个声明，它会让所有后代圆角失效。别只查直接父级，得一层层 getComputedStyle(el).overflow 往上看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
