Gatsby项目Safari及移动端图片border-radius圆角失效如何解决

我了解到社区已有同类问题发布，但帖中给出的解决方案对我均无效，很抱歉再次提问求助。
在Gatsby项目中需要为图片添加实线边框与圆角效果，该效果在Chrome浏览器中显示符合预期，但在移动端设备与Safari浏览器中，图片无法渲染圆角，且内容溢出边框区域，需要修复该问题。

现有实现代码 #

CSS样式 #

.imgContainer {
  border: solid 1px #0784b5;
  border-radius: 10px;
  overflow: hidden;
}

.img {
  position: relative;
  border-radius: 10px;
  top: 0;
  left: 0;
}

JSX结构 #

<div className={styles.imgContainer}>
  <GatsbyImage 
    className={styles.img} 
    image={data.file.childImageSharp.gatsbyImageData} 
    alt="portrait" 
  />
</div>

效果对比 #

• 预期效果：
• Safari端实际异常效果：

这是Safari内核下overflow: hidden搭配border-radius裁剪子元素的已知渲染bug，GatsbyImage自带的内部定位、懒加载占位层结构会放大这个问题，按以下步骤修改即可解决：

• 给容器元素添加渲染隔离属性，强制开启独立合成层，从根本上解决裁剪失效问题：

.imgContainer {
  border: solid 1px #0784b5;
  border-radius: 10px;
  overflow: hidden;
  /* 以下为新增Safari适配属性 */
  transform: translateZ(0);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

• 清理图片元素上的冗余样式：GatsbyImage内部已经封装了完整的定位逻辑，额外添加的position: relative、重复的border-radius、top/left偏移属性会打乱Safari下的层级裁剪关系，直接删除这些冗余属性即可，如有尺寸调整需求，补充width: 100%; display: block;这类基础样式就行。

.img {
  width: 100%;
  display: block;
}

修改完成后清除项目缓存重新构建，Safari和移动端下的圆角溢出、边框显示异常问题就会修复，显示效果和Chrome完全一致。

内容的提问来源于stack exchange，提问作者Simon CF