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

html代码如下：

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;导致，一删掉它就可以显示正常，加上就无法裁剪成圆了。

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