问题
I have a "box" that "cuts" a piece of a "circle", which is to say there's a div that has overflow hidden with a much large div inside of it, the inner having a border-radius.
I have another div inside that circle div that is a rectangle, which animates a rotation.
<div id="clipper">
<div id="round">
<div id="meter"></div>
</div>
</div>
The fiddle can be seen here, which shows the css problem (the animation is done with JS requestAnimationFrame, but that part works fine and it's a bit verbose to show here.) This happens using native Android 4.0.4 browser: so far, it works fine everywhere else CSS3 is supported.
Any magic CSS property I can use to fix this? I've tried setting background, z-index and various 3d transform properties on the #clipper div per other similar questions, to no avail. Oddly, it appears as though the overflow is respected on the left edge of the element only.
Edit - Partial Fix
Adding:
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
to the #round div fixes the overflow from the #clipper div, however #meter still overflows. Updated fiddle here. The meter already has a transform on it.
More information
I've tried another layout I just thought up, which does the same thing, but fixes the issue here (doesn't fix the bug, just avoids it). However, it has created a new, even more fun Android 4.0.4 issue:
div rotates but div's clipping box does not
回答1:
I've removed the CSS Vendor prefixes in my example, but if you add the ones you need back this might fix it.
http://jsfiddle.net/FB6rf/24/
unfortunately I don't have an android device to test on, but I've updated the CSS the sanest way I could think about it. (You'll also notice the edges of the square aren't as jagged -- this problem was due to having the most inner element set to overflow:hidden)
Hope it helps!
来源：https://stackoverflow.com/questions/20662834/overflow-hidden-border-radius-and-transform-in-android-browser