Safari 浏览器 border-radiuss 失效的解决办法

在做一个公司网站的时候遇到一个问题,记录如下:

把文章缩略图增加了一个 transform 动画(左右滑动),并设置图片 border-radius: 5px;(也就是为图片增加了一个圆角效果) , 在 chrome、ie、firefox 上都可以正常显示,但是在 Safari 浏览器上面却无效…

问题所在:

因为图片 img 用了 transform 动画,所以导致 Safari 浏览器下 border-radiuss 失效

解决办法:

给img的父级加上以下这些属性就好了

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
分享海报

关于我

大胡子,男,生于1994年,河南洛阳人。

很多人对我的网名有误解,这里顺便解释一下,我姓胡,大胡子这个网名始于2013年,早期的一些网友管我叫胡子,然后我就给自己取了个网名叫「大胡子」,这里的「大」是长大了的意思。

自由职业者,8年WordPress网站开发经验,不善言辞,喜欢爬山、摄影,油泼面的粉丝,和很多人一样,包揽了生活中不同的角色和位置。

如果你有网站相关类的业务需求,可以联系我哦,期待与你的合作~