iOS 11.x 的 Cordova 中的 CSS 图像掩码损坏？

Question

我在我的流星应用程序中使用 -webkit-mask-image，如下所示：

...
background-color: purple; 
-webkit-mask-image: url('images/user_plum.png');
...

它在所有浏览器中都能正常工作。它在 Android 上的 cordova 版本中运行良好。 在 iOS Cordova 中运行良好。现在，只有在 iOS 中，我使用这种技术的所有图标都是不可见的，即使它们仍然可以点击并正常工作。

问题是在两个用户的 iPhone 上发现的，我在 iOS 模拟器中重现了它。我的 iPhone 运行良好。卸载/重新安装应用程序，重建/重新启动服务器等，没有任何改变。直到我将手机更新到 iOS 11.4，现在我的手机也出现了问题。如果我从 CSS 中删除该 -webkit-mask-image 行，我通常会在图标所在的位置得到正确的背景色方块。该和其他模拟器测试清楚地表明，不可见图标仅发生在 iOS 设备和模拟器上，并且只有在使用 -webkit-mask-image 时才会发生。是否有人知道 iOS 11.1 和 11.4 之间的任何更改会破坏 Cordova webview 对 -webkit-mask-image 的处理？

Answer 1

好的，这个问题很现实，我做了一堆测试，安装了不同风格的inappbrowser等，都没有成功。但这里有一个解决方法（感谢@JamesMontagne 的回答和Is there any way to colorize a white PNG image with CSS only? 的jsfiddle 让我尝试了它）：

只需使用 -webkit-mask-box-image 代替 -webkit-mask-image。

background-color: purple; 
-webkit-mask-box-image: url('images/user_plum.png');

这将继续在它已经工作的所有平台上运行，但也适用于它 -webkit-mask-image 已损坏的 iOS 11.x Cordova 环境。

需要明确的是，-webkit-mask-box-image 在 mozilla 文档中带有“非标准”警告：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image。

但当 -webkit-mask-image 不可用时它会起作用，所以我现在就使用它。

另外，仅供参考，user_plum.png 是一个带有李子色图标图像的透明 png。不透明部分的颜色是什么并不重要，在这个遮罩中没有进行颜色数学运算。图标不一定非要为白色才能工作（许多网页的 css 遮罩主题都包含关于白色或黑色遮罩的讨论）。

Answer 2

我在 iOS 中为everyicon 的两行代码都解决了这个问题：

-webkit-mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);

到 CSS 图标...由于某种奇怪的原因，必须按那个顺序（首先是 webkit，然后是掩码！）