父元素设置了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

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