android - 在 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;