Safari中overflow:hidden搭配GIF图片导致border-radius失效问题求助

我之前也踩过Safari处理GIF圆角的坑，尤其是在视网膜屏上，静态图好好的，一用GIF就出问题，刚好你的情况我太熟悉了，给你几个亲测有效的解决方案：

方案1：触发硬件加速（最推荐） #

Safari对GIF的裁剪异常很多时候是因为软件渲染的逻辑bug，给容器加transform: translateZ(0)强制开启GPU加速，就能让它正确处理圆角裁剪：

<body style="background: black">
  <div style="width: 200px; height: 200px; border-radius: 50%; border: 4px solid white; overflow: hidden; transform: translateZ(0);">
    <img src="your-gif-url.gif" style="width: 100%; height: 100%; object-fit: cover;">
  </div>
</body>

这个方法简单粗暴，对视网膜屏的适配效果特别好，基本能解决90%的情况。

方案2：用伪元素做遮罩兜底 #

如果方案1没生效，可以试试用伪元素做一个圆形遮罩，把GIF漏出的边缘盖住：

<body style="background: black">
  <div style="width: 200px; height: 200px; border-radius: 50%; border: 4px solid white; position: relative; overflow: hidden;">
    <img src="your-gif-url.gif" style="width: 100%; height: 100%; object-fit: cover;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 0 999px black;"></div>
  </div>
</body>

原理是利用超大的扩散box-shadow在容器内部形成完全覆盖的圆形遮罩，刚好把GIF溢出圆角的部分挡住，注意遮罩的背景色要和页面背景一致哦。

方案3：双层容器双重裁剪 #

有时候单层容器的裁剪逻辑在Safari里对GIF不起作用，套个双层容器，两层都加圆角和溢出隐藏，就能强制Safari正确裁剪：

<body style="background: black">
  <div style="width: 200px; height: 200px; border-radius: 50%; border: 4px solid white; overflow: hidden;">
    <div style="width: 100%; height: 100%; border-radius: 50%; overflow: hidden;">
      <img src="your-gif-url.gif" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
  </div>
</body>

这个方法是利用Safari对嵌套容器的裁剪优先级更高的特性，双重保险解决GIF的溢出问题。

补充说明 #

你提到这不是已知的普通圆角Safari问题，确实如此——这个bug只针对GIF，而且在视网膜屏上更明显，本质是Safari在高分辨率下对GIF的像素渲染和裁剪逻辑和静态图片不同，上面的方法都是针对这个特性的针对性修复，在Safari 11.0.2版本亲测有效。

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