溢出：隐藏+ Gif打破safari上的border-radius

时间：2018-04-03 10:01:48

标签： html css safari

我想将overflow: hidden和border-radius: 50%应用于图片以创建圆角边角。

此问题与Rounded cornes (border radius) Safari issue不重复。我的问题只发生在图像为gif时。

然而，当图像是gif时，它会在safari上中断。我可以在视网膜屏幕上更频繁地重现问题。我的safari版本是11.0.2（13604.4.7.1.3）。

    <body style="background: black">
      <div style="width: 200px;border-radius: 50%;border: 4px solid white;overflow: hidden;">
        <img src="https://media.giphy.com/media/o0vwzuFwCGAFO/giphy.gif" style="width: 100%">
      </div>               
    </body>

我在safari上看到的是边界断裂。

enter image description here

我已尝试transform: translate3D()创建新的渲染层和mask-imge来解决此问题。但是，它们也不起作用。

提前感谢您的其他工作！

0 个答案:

没有答案
相关问题
最新问题