切换为gatsby-plugin-image后Safari中CSS Border Radius不生效问题

gatsby-plugin-image 导出的 GatsbyImage 组件内部自带多层嵌套DOM结构，直接给外层组件设置 border-radius 时，Safari 浏览器默认不会对内部的图片内容做溢出裁剪，因此圆角样式无法生效，其他内核浏览器会自动处理该场景，所以显示正常。

方案一（优先使用） #

给自定义的样式组件新增 overflow: hidden 属性，强制 Safari 裁剪超出圆角范围的内容：

export const MyImageContainer = styled(GatsbyImage)`
  cursor: pointer;
  border-radius: 25px;
  overflow: hidden; /* 新增该行即可 */
`

方案二（方案一无效时使用） #

如果添加 overflow: hidden 后仍未生效，可同时给内部的图片元素同步设置圆角属性：

export const MyImageContainer = styled(GatsbyImage)`
  cursor: pointer;
  border-radius: 25px;
  overflow: hidden;
  & img {
    border-radius: 25px;
  }
`

如果你的图片还设置了平移、缩放等 transform 相关动效，可额外添加 isolation: isolate 属性避免 Safari 渲染层级异常导致圆角失效。

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