💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
Safari浏览器中的overflow: hidden和border-radius可能无法限制子元素超出边界的bug，可以通过生成堆叠上下文的CSS属性解决。
🎯
关键要点
- 在 Safari 浏览器中，设置 overflow: hidden 和 border-radius 的父元素可能无法限制子元素超出边界。
- 即使在父元素中设置了 overflow: hidden 和 border-radius，子元素仍可能在 border-radius 范围之外显示。
- 该问题在 macOS Safari 和 iOS 上的 Chrome 等浏览器中均可复现。
- 问题的原因似乎是 Safari（WebKit）的一个 bug，称为 Bug 140535。
- 通过添加生成堆叠上下文的 CSS 属性可以解决该问题。
- 生成堆叠上下文的方法包括：设置 isolation: isolate、设置 position 和 z-index、设置 transform。
- 推荐使用 isolation: isolate 方法来生成堆叠上下文。
➡️
