溢出隐藏，边境半径和Android浏览器变换 [英] overflow hidden, border radius and transform in android browser
问题描述
我有一个盒子，即切一块圆，这是说有已经溢出隐藏着它里面一个非常大的div一个div，内有一个边界半径。的
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.
我有一个圆圈的div是一个矩形，其中动画旋转内另一个div。
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>
小提琴可以看出这里，这显示的CSS问题（动画与JS做requestAnimationFrame，但是这部分工作正常，这是一个有点冗长，在这里显示）发生这种情况使用原生Android 4.0.4浏览器：到目前为止，它工作正常，在其他地方CSS3的支持。
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.
任何魔法CSS属性，我可以用它来解决这个问题？我试过设置的背景下，Z-index和各种3D转换属性每其他类似的问题在 #clipper DIV，都无济于事。奇怪的是，它看起来好像在溢出的元素的左侧边缘而已。
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.
编辑 - 部分修复
添加
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
到 #round DIV但是修复从 #clipper DIV溢出， #meter 仍然溢出。更新小提琴这里。该表已经有了一个关于它改造。
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.
更多信息
我试过其他布局我只是想起来，这做同样的事情，但在这里修复该问题（不修正错误，只是避免它）。然而，它创造了一个新的，更有趣的Android 4.0.4问题：
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:
<一个href=\"http://stackoverflow.com/questions/20665031/android-4-0-4-clipping-box-does-not-rotate-with-element\">Android 4.0.4 - 裁剪框不与元素旋转
推荐答案
我已经删除了我的例子中，CSS卖方prefixes，但如果添加需要回的人，这可能解决它。
I've removed the CSS Vendor prefixes in my example, but if you add the ones you need back this might fix it.
不幸的是我没有在Android设备上测试，但我已经更新了CSS，我可以考虑一下了sanest方式。 （您还会注意到广场的边缘并不像锯齿 - 这个问题是由于其设置为最内部元件溢出：隐藏）
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)
希望它帮助！
这篇关于溢出隐藏，边境半径和Android浏览器变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
