1

我在我的流星应用程序中使用 -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 的处理？

4

2 回答 2

4

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

只需使用 -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-盒子图像。

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

另外，仅供参考，user_plum.png 是带有梅花色图标图像的透明 png。不透明部分的颜色是什么并不重要，在这个遮罩中没有进行颜色数学运算。该图标不必是白色的（许多 CSS 遮罩主题的网页都包含关于白色或黑色遮罩的讨论）。在此处输入图像描述

于 2018-07-28T16:36:40.913 回答
1

我在 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，然后是掩码！）

于 2019-10-16T19:46:05.383 回答