父元素设置了overflow:hidden和border-radius后子元素设置transform超出部分并不能隐藏，如何解决？

Question

在pc端正常，安卓浏览器中不正常，怎么解决？

    .div1{
        width: 16.375em;
        height: 16.375em;
        border-radius: 8.1875em;
        -webkit-border-radius: 8.1875em;
        margin: 0 auto;
        z-index: 30;
        display: block;
        position: relative;
        overflow: hidden;
        background: #eee;
        margin: 100px auto;
    }
    
    .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: yellow;
    }
    
    .circle:hover {
        background: red;
        -webkit-transform: translate3d(0px, 0px, 1px);
     
    }

        <div class="div1">
            <div class="circle">222</div>
        </div>

pc端鼠标滑过后：

但在安卓手机上点击后显示如下：

这样的问题怎么解决呢？

Answer 1

-webkit-mask-image

Answer 2

这应该是你浏览器的问题，用正版浏览器吧，因为你不知道哪些自研的山寨浏览器是咋样的；