深究 Safari 下 border-radius 和 overflow 不生效的问题

发布于 2023-05-12 12:38:16 字数 4597 浏览 70 评论 0

背景

前两天在做需求的时候，发现了 Safari 浏览器（包括 iOS 平台各浏览器）下有一个渲染的 Bug，其他则没问题。

复现示例如下：

<div class="box">
  <img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lEtuTZi2GvIAAAAAAAAAAABkARQnAQ" alt="picture" />
</div>

.box {
  width: 270px;
  height: 169px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  border: 4px solid #000;
}

.box img {
  width: 100%;
  height: 100%;
  transform: translateZ(10px);
}

CodeSandbox Demo

其实就是简单地在 .box 中添加了 overflow: hidden; border-radius: 30px; 做一个圆角处理。上图为预期表现。但是在 Apple 的 WebKit 平台（不包含 Chrome 的 Blink 平台），就出现问题了

是 overflow: hidden 处理无效？还是 border-radius 的问题？

原因

解决方法很多，我们先深究下原因。

前面，我们给 <img> 添加了 transform: translateZ(10px)，于是该元素产生了 Composite Layer（合成层）。

.box img {
  width: 100%;
  height: 100%;
  transform: translateZ(10px);
}

而 Webkit 内核中，border-radius 对含有 Composite Layer 的元素的裁剪是存在 Bug 的，该问题可以追溯到 2011 年，很早就有人提出问题了。

Bug 68196: border-radius clipping of composited layers doesn't work

发现该 Bug 在 2022 年 9 月 7 日已被标记为「RESOLVED FIXED」，在 2022 年 10 月 19 日发布的 Safari Technology Preview 156 中已修复。好家伙，这问题整整十多年才解决。

隔壁 Blink 内核（基于 Webkit 的一个分支）则在 2017 年 1 月 24 日修复。

Issue 157218: border-radius clipping without a stacking context does not apply to composited children

解决方法

我们只要在 border-radius 的元素上添加一个可创建 Stacking Context（层叠上下文）的 CSS 属性即可。比如 transform: scale(1)、transform: translateZ(1px)、isolation: isolate、position: relative; z-index: 0 等等。

从语义角度考虑，个人更偏向使用 isolation，它表示该元素是否必须创建一个新的层叠上下文。
从兼容性角度考虑，相比 isolation，transform 或 position + z-index 会更好一些。

.box {
  width: 270px;
  height: 169px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  border: 4px solid #000;
  isolation: isolate; /* 新增 */
}

.box img {
  width: 100%;
  height: 100%;
  transform: translateZ(10px);
}