border-radius 失效

问题描述

border-radius 失效问题，部分机型的兼容性，实测：ios 14，低版本安卓机型上复现；

问题原因

设置了border-radius，也设置了overflow:hidden，预览也没事，就是真机不行。

其实就是父级设置圆角属性失效，父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。

解决方案

在父级，就是设置了radius属性的class上加上这两条css就可以了

div {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}

但是上述方案会影响 fixed 布局，假如有个 fixed 元素定位在 此div 上，则不显示，此时，需要根据 fixed 元素的是否 fixed 状态动态控制以下属性：

div {
    -webkit-backface-visibility: visible;
    -webkit-transform: none;
}