React项目Safari下border-radius样式不生效如何解决

直接按优先级排查以下问题，覆盖99%的同类场景：

• 强制触发Safari圆角裁剪逻辑
  Safari 存在已知渲染bug：当元素是img标签加载位图、元素/父元素绑定了transform/transition动画、或者元素开启了硬件加速时，仅写border-radius和-webkit-border-radius不会触发正确的边缘裁剪，直接给头像元素加下面两个属性即可：

  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  

  这行mask属性会强制Webkit内核按元素轮廓做像素级裁剪，不会影响其他浏览器的渲染效果。
• 排查样式优先级覆盖问题
  React项目中如果引入了第三方UI库、全局重置样式、或者使用了CSS-in-JS/CSS Module方案，很容易出现自定义圆角样式被高优先级规则覆盖的情况。可以先给圆角规则临时加!important验证，如果生效就调整选择器权重，注意标准属性和webkit前缀属性要同时保留：

  .profile-avatar {
    width: 56px;
    height: 56px;
    /* 核心样式 */
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    object-fit: cover; /* 头像图适配属性，避免图片拉伸变形 */
  }
  

• 背景头像/带边框头像额外适配
  如果你是用div+background-image实现的头像、或者头像本身带border样式，需要补充background-clip: padding-box属性。Safari默认的背景裁剪逻辑和Chromium内核不同，会把背景内容渲染到border下层，视觉上看起来像圆角没生效。
• 跨域头像资源适配
  如果头像资源存在跨域，旧版iOS Safari和桌面Safari会因为跨域资源的渲染权限问题跳过圆角裁剪，直接在img标签上增加跨域属性即可，React中写法如下：

  <img className="profile-avatar" src={avatarSrc} alt="个人头像" crossOrigin="anonymous" />
  

• 动效场景适配
  不要直接给头像元素加will-change: transform或者transform类动效，这类属性会让元素进入独立合成层，Safari对合成层元素的圆角裁剪有bug。如果需要做悬停、滚动动效，给头像套一层父容器，把圆角、overflow:hidden和动效都加在父容器上即可。

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