溢出隐藏，边框半径和android浏览器中的转换

Question

我有一个“切割”一个“圆圈”的“盒子”，也就是说有一个div溢出，里面有一个很大的div，内部有一个边界半径。 / p>

我在圆圈div中有另一个div，它是一个矩形，可以动画旋转。

<div id="clipper">
    <div id="round">
        <div id="meter"></div>
    </div>
</div>

可以看到小提琴here，它显示了css问题（动画是使用JS requestAnimationFrame完成的，但该部分工作正常，这里显示的有点冗长。）这种情况发生在使用原生Android 4.0。 4浏览器：到目前为止，它在其他任何地方都可以使用CSS3。

我可以使用任何神奇的CSS属性来解决这个问题吗？我已经尝试在#clipper div上设置背景，z-index和各种3d变换属性以及其他类似的问题，但无济于事。奇怪的是，似乎溢出仅在元素的左边缘受到尊重。

修改 - 部分修复

添加：

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

到#round div修复了#clipper div的溢出，但#meter仍然溢出。更新了小提琴here。仪表已经对它进行了改造。

更多信息

我已经尝试了另一种我刚刚想到的布局，它做了同样的事情，但是修复了这里的问题（不修复bug，只是避免它）。但是，它创造了一个新的，更有趣的Android 4.0.4问题：

div rotates but div's clipping box does not

Answer 1

我已经删除了我的示例中的CSS供应商前缀，但是如果你添加了你需要的那些，这可能会解决它。

http://jsfiddle.net/FB6rf/24/

不幸的是，我没有安装Android设备，但我已经更新了CSS，这是我能想到的最佳方式。 （你还会注意到正方形的边缘不是锯齿状的 - 这个问题是由于最内层元素设置为overflow:hidden）

希望它有所帮助！