在 android 浏览器中溢出隐藏、边框半径和变换答案

【问题标题】：overflow hidden, border radius and transform in android browser在 android 浏览器中溢出隐藏、边框半径和变换
【发布时间】：2014-01-06 21:47:41
【问题描述】：

我有一个“盒子”，它“切割”了一个“圆”，也就是说有一个 div 隐藏了溢出，里面有一个很大的 div，内部有一个边界半径。

我在那个圆形 div 内有另一个 div，它是一个矩形，它为旋转设置动画。

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

fiddle 可以看到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。仪表上已经有一个变换。

更多信息

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

【问题讨论】：

【解决方案1】：

我在示例中删除了 CSS Vendor 前缀，但如果您添加您需要的前缀，这可能会修复它。

很遗憾，我没有要测试的安卓设备，但我已经以我能想到的最明智的方式更新了 CSS。（您还会注意到正方形的边缘没有锯齿状——这个问题是由于将最内部的元素设置为overflow:hidden）

希望对你有帮助！

【讨论】：