Safari 16.3中父/子元素设border-radius与overflow:hidden时子边框消失问题

问题表现 #

• 在Safari 16.3中，当父容器（.wrapper）和子元素button同时配置border-radius与overflow:hidden时，button的边框会完全消失
• Chrome、Firefox等其他主流浏览器无此异常

复现代码 #

HTML #

<div class="wrapper">
  <button>Border applied for this button is not visible in safari</button>
</div>

CSS #

button {
  background: transparent;
  border-width: 6px;
  border-style: solid;
  border-color: black;
  border-radius: 250px;
  padding: 1rem;
  filter: opacity(0.3);
  overflow: hidden;
/*   transform: scale(1); 启用此属性可解决问题 */
}
.wrapper {
  overflow: hidden;
  border-radius: 250px;
}

解决方案 #

为button添加transform: scale(1)属性，即可恢复边框显示：

button {
  /* 保留原有样式 */
  transform: scale(1);
}

原理解析 #

这是Safari渲染引擎的兼容性问题，核心逻辑如下：

1. 当元素同时设置overflow:hidden和border-radius时，Safari会对元素的渲染层进行裁剪，但button作为表单控件，其内置的边框渲染逻辑与父元素的裁剪规则存在冲突，导致边框被错误裁剪隐藏
2. 添加transform: scale(1)会强制为button创建一个新的层叠上下文，改变元素的渲染层级和绘制顺序，让Safari能够正确识别边框与父元素裁剪区域的关系，从而避免边框被误裁剪

内容的提问来源于stack exchange，提问作者Amith B