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

Question

我在我的 meteor 应用中使用了 -webkit-mask-image，像这样：

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

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

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

Answer 1

好吧，这个问题很现实，我做了一堆测试，安装了不同风格的inappbrowser等等，都没有用。但这里有一个解决方法（感谢@JamesMontagne 的回答和的 jsfiddle 让我尝试了）：

只需使用 -webkit-mask-box-image 而不是 -webkit-mask-image。

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

这继续在它已经工作的所有平台上工作，但也在这个 iOS 11.x Cordova 环境中工作，其中 -webkit-mask-image 已损坏。

明确地说，-webkit-mask-box-image 在 mozilla 文档中带有 "non-standard" 警告：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.

但它在 -webkit-mask-image 不可用时有效，所以我暂时使用它。

此外，仅供参考，user_plum.png 是一个带有紫红色图标图像的透明 png。不透明部分的颜色是什么并不重要，在此遮罩中没有进行任何颜色计算。图标不一定非得是白色才能工作（css 屏蔽主题的许多网页都包含对白色或黑色屏蔽的讨论）。

Answer 2

我在 iOS 为每个图标编写两行代码时解决了这个问题：

-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，其次是掩码！）

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

CSS image mask broken in Cordova for iOS 11.x?

ios

css

cordova

webview

image-masking