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);
大胡子
少花时间撕逼,多花时间进步,尽快摆脱傻逼!
查看“大胡子”的所有文章 →

相关推荐