解决Safari以及iOS上的其他浏览器子元素不受border-radius作用的问题

正在召唤神秘力量

导航

作者：广树·时间：2024-01-16 18:00:00·分类：CSS/HTML

在使用 Safari 浏览器查看 HTML 时，即使在父元素中设置了 overflow: hidden 和 border-radius，子元素仍然可能超出 border-radius 的范围而显示的问题。

问题：

尽管在父元素中设置了 overflow: hidden 和 border-radius 以应用圆角样式于子元素，但在桌面版 Safari 或 iOS 上的 Chrome 等浏览器中，子元素仍然可能在 border-radius 的范围之外显示。

例如，通过以下方式将 <img> 放在 <div> 中，设置 overflow: hidden 和 border-radius 就能复现这个现象。

HTML：

<div class="parent">
  <img src="avatar.jpg" width="100" height="100" />
</div>

CSS：

.parent {
  overflow: hidden;
  border-radius: 50%;
}

当然，如果直接在要应用样式的元素上设置 border-radius，则会按预期显示（理所当然）。因此，问题只在设置了 overflow: hidden 和 border-radius 的父元素时才会出现。

我在以下浏览器版本中能够复现这个现象：

原因：

直接进入结论，似乎 Safari（准确说是 WebKit）的一个 bug（？）是问题的原因。在 WebKit Bugzilla 的 Bug 140535 中称其为“仅在非堆叠上下文中发生”。

为了验证这一点，如果添加生成堆叠上下文的 CSS 属性，问题将得到解决。

解决方法：

因为问题似乎仅在非堆叠上下文中发生，所以可以通过有意地生成堆叠上下文来避免。具体而言，有以下几种方法可以在不影响外观的情况下生成堆叠上下文：

方法 A) 设置 isolation: isolate

.parent {
  isolation: isolate;
}

方法 B) 设置 position 和 z-index

.parent {
  position: relative;
  z-index: 0;
}

方法 C) 设置 transform

.parent {
  transform: translateZ(0);
}

从本质上来说，“生成堆叠上下文”的意思来说，最直接的可能是方法 A) 中的 isolation: isolate。如果没有其他特殊原因，可能最好选择 A)。有关生成堆叠上下文的其他方法，如果感兴趣，可以查阅 MDN 页面：

侧边栏