在Android默认浏览器上组合-webkit-mask和-webkit-transform

Question

在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浏览器的已知问题吗？有什么方法吗？

Answer 1

我不是专家，但你试过了吗？

body {
background-color: transparent;

}