在 Android 默认浏览器上结合 -webkit-mask 和 -webkit-transform答案

【问题标题】：Combining -webkit-mask and -webkit-transform on Android default browser在 Android 默认浏览器上结合 -webkit-mask 和 -webkit-transform
【发布时间】：2014-10-14 10:31:43
【问题描述】：

在 Android 4.3 设备上，使用默认浏览器，我正在创建一个同时使用 -webkit-mask 和 -webkit-transform: rotate 的元素。但是当我结合这两种样式时，元素的背景颜色并没有被正确地掩盖。

这是没有旋转（顶部）和旋转（底部）的样子。如您所见，底部图像没有屏蔽背景：

这就是我所期待的。这是我在 Chrome 和其他浏览器上得到的：

底部元素有以下样式（完整来源为here）：

background-color: red;
-webkit-mask: center center url('data:image/png;base64,...') no-repeat;
-webkit-mask-size: 2em 3em;
-webkit-transform: rotate(-180deg);

这是现有 Android 浏览器的已知问题吗？有什么办法吗？

【问题讨论】：

标签： android css css-transforms

【解决方案1】：

我不是专家，但你试过吗：

body {
background-color: transparent;

}

【讨论】：

这没有任何意义。