transform导致border-radius，overflow:hidden失效？

Question

html代码如下：

<div class="circle2">
                       
    <span class="wave"></span>
 
</div>

css代码如下：

.circle2 {
    width: 162px;
    height: 162px;
    border-radius: 50%;
    position: relative;
    top: 18px;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 2px 5px 2px #269e89 inset;
    z-index: 1;
}

.wave {
    width: 262px;
    height: 262px;
    position: absolute;
    background: linear-gradient(#2aa192, #2ea790);
    background: -webkit-linear-gradient(#2aa192, #2ea790);
    top: -140px;
    left: -100px;
    filter: opacity(0.5);
    border-radius: 43%;
    animation: drift linear infinite;
    transform-origin: 50% 48%;
    overflow: hidden;
}

  @keyframes drift {
            from {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes drift {
            from {
                transform: rotate(360deg);
            }
        }

.wave:nth-of-type(1) {
    animation-duration: 10s;
    -webkit-animation-direction: alternate;
}

在正常的情况下如下图：

但是在一些低端一点的系统手机，显示就有问题如下：

手机系统信息如下：

我发现是这行代码animation: drift linear infinite;导致，一删掉它就可以显示正常，加上就无法裁剪成圆了。

网上找了好几种方法尝试都没有效果，在此请教各路大神解答

Answer 1

可能border-radius,transform,transform-origin属性存在一定的兼容性问题，必须要加上浏览器厂标。

.circle2 {
  ...
 -ms-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 
 -ms-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
   
}

Answer 2

这个问题我也遇见过，貌似是浏览器实现的 bug。
在 overflow: hidden 的 container 上加上 transform: rotate(0deg)，当然其他调用 GPU 的属性貌似也可以：https://gist.github.com/ayamf...

Answer 3

我边上没有手机能够重现你的bug，但是希望以下的文章对你有帮助

参考链接：https://www.zhangxinxu.com/wo...
里面提到了：无论是overflow容器还是嵌套子元素，只要有transform属性，就会hidden溢出的absolute元素。

border-radius没有问题，是父节点的overflow:hidden失效了。可以考虑去掉父节点的transform属性，或者再嵌一层节点。（没有手机试验，仅供参考）

Answer 4

clip-path放在父元素上试试吧