解决Safari以及iOS上的其他浏览器子元素不受border-radius作用的问题
内容提要
Safari浏览器中的overflow: hidden和border-radius可能无法限制子元素超出边界的bug，可以通过生成堆叠上下文的CSS属性解决。
延伸解读
问题复现与影响范围
文章指出，在 macOS Safari 15.4、iOS Chrome 100 和 iOS Brave 1.37 等 WebKit 内核浏览器中，父元素设置 overflow: hidden 和 border-radius 后，子元素仍可能溢出圆角边界。该问题仅当圆角设置在父元素时出现，直接设置在子元素上则正常。这意味着依赖父级裁剪实现圆角头像、卡片等效果的页面，在 Safari 上可能显示异常。
根因：非堆叠上下文下的裁剪失效
根据 WebKit Bugzilla 的 Bug 140535，该问题被描述为“仅在非堆叠上下文中发生”。也就是说，当父元素未生成堆叠上下文时，Safari 对合成后代的圆角裁剪可能失效。文章通过添加生成堆叠上下文的属性验证了这一点，说明问题与渲染层级机制相关，而非简单的 CSS 写法错误。
解决方案与选择建议
文章给出三种不影响外观的修复方式：设置 isolation: isolate、position: relative 配合 z-index: 0、或 transform: translateZ(0)。其中 isolation: isolate 最直接地生成堆叠上下文，且不引入定位或变换的副作用，因此作者推荐优先使用。若项目已有定位或变换需求，也可选用其他方法，但需注意它们可能影响布局或动画。
Q&A
为什么在Safari中父元素设置了overflow: hidden和border-radius，子元素还是超出了圆角范围？
这是Safari（WebKit）的一个bug，称为Bug 140535，该bug仅在非堆叠上下文中发生，导致border-radius无法裁剪非堆叠上下文中的子元素。
哪些浏览器会出现子元素不受border-radius限制的问题？
该问题在macOS Safari 15.4、iOS Chrome 100.0.4896.85、iOS Brave 1.37等浏览器中均可复现。
如何用CSS解决Safari中子元素溢出border-radius的问题？
可以通过为父元素添加生成堆叠上下文的CSS属性来解决，例如设置isolation: isolate、position: relative和z-index: 0，或者transform: translateZ(0)。
推荐使用哪种方法生成堆叠上下文来修复这个bug？
推荐使用isolation: isolate方法，因为它最直接地生成堆叠上下文，且不影响外观。
除了isolation: isolate，还有哪些CSS属性可以创建堆叠上下文？
还可以使用position: relative配合z-index: 0，或者使用transform: translateZ(0)来创建堆叠上下文。
这个bug在什么情况下不会出现？
如果直接在需要应用圆角的元素上设置border-radius，而不是在父元素上设置overflow: hidden和border-radius，则不会出现此问题。
