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

大胡子

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

相关推荐

JS如何判断有没有上一页

在做一个项目的时候,用户有个简单的需求,可以在当前页面点击返回上一页,用下面的js代码即可实现。 但是,如果 …

暂无评论

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

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