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);

大胡子

少花时间撕逼,多花时间进步!

相关推荐

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

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