鍍金池/ 問答/HTML5  HTML/ transform導(dǎo)致border-radius，overflow:hidden

transform導(dǎo)致border-radius，overflow:hidden失效？

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

在正常的情況下如下圖：

clipboard.png

但是在一些低端一點的系統(tǒng)手機(jī)，顯示就有問題如下：
圖片描述

手機(jī)系統(tǒng)信息如下：
圖片描述

網(wǎng)上找了好幾種方法嘗試都沒有效果，在此請教各路大神解答

回答
編輯回答
雨蝶
可能border-radius,transform,transform-origin屬性存在一定的兼容性問題，必須要加上瀏覽器廠標(biāo)。
.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%);
   
}
2017年12月2日 05:47
編輯回答
尤禮

這個問題我也遇見過，貌似是瀏覽器實現(xiàn)的 bug。
在 overflow: hidden 的 container 上加上 transform: rotate(0deg)，當(dāng)然其他調(diào)用 GPU 的屬性貌似也可以：https://gist.github.com/ayamf...

2017年10月27日 12:49