导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
热门文章
1推文
飞猪说这一班飞机没有餐食,结果特意吃饱了上飞机,结果突然端出来量大管饱的飞机餐我都懵了。 这是一条来自高空的推文。
热度
532
2推文
酒店免费把我的双人床升级成了2张双人床!空间是大了许多,但是1个住有些浪费呀。
热度
492
3页面
程序员老黄历&求签
热度
299
4推文
抵达台北开始6天5夜的台湾之旅!
热度
206
5推文
又到了日本5月黄金周的时期了。 去年的黄金周去了秩父和长瀞,今年的黄金周决定去一个远一点的地方,去一个不在日本国内的地方。
热度
91
6推文
最新一集的《mono女孩》里的《摇曳露营△》彩蛋真的太多啦!
热度
91
7博文
探访《蜡笔小新》老家——春日部游记
热度
91
8博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
91
9推文
《苍之彼方的四重奏 10th Anniversary Box》预计2025年3月28日发售,售价为含税19800日元(约922人民币)。 其中如果购买了sprite LIMITED EDITION或FILMIC EDITION版的话,还有机会将名字(猜测)登在结尾字幕中! sprite LIMITED EDITION版售价39800日元(约1853人民币),FILMIC EDITION版售价149800日元(约6973人民币)。 感觉如果花1853人民币就能把"维基萌"打在游戏结尾字幕中也似乎不错的样子?🤔 《苍之彼方的四重奏 10th Anniversary Box》专题页面:https://sprite.net/aokana/10thanniversary/box
热度
78
10页面
友链
热度
65
最新评论
广树管理员
2025-04-29 22:48
@夕阳西下:哈哈哈,是这么操作的
夕阳西下
2025-04-29 22:46
一个睡觉,另外一个放衣服
广树管理员
2025-04-29 21:37
@Zrzzz:期待第四季的摇曳露营吧
广树管理员
2025-04-29 21:37
@mikusa:哈哈哈,确实有点出戏
广树管理员
2025-04-29 21:37
@ZeroCounter:是吗?真的被飞机的量吓到了。2块面包,1盒咖喱米饭,1碗沙拉,1碗水果,1杯茶,1杯水。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月6天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

解决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 的父元素时才会出现。

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

  • macOS Safari: 15.4 (17613.1.17.1.13)
  • iOS Chrome: 100.0.4896.85
  • iOS Brave: 1.37 (22.4.6.8)

原因:

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

140535 – Border-radius clip of non-stacking composited descendant doesn't work

为了验证这一点,如果添加生成堆叠上下文的 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 页面:

The stacking context - CSS: Cascading Style Sheets | MDN

翻译自:《Safari や iOS 上のブラウザで border-radius で子要素をマスクできない問題》

donate.png

1210 x 50(蓝底).png

cloudcone