大胡子

又一个WordPress爱好者

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

0条评论

发表评论