我在 meteor 应用中使用-webkit-mask-image,如下所示:
...
background-color: purple;
-webkit-mask-image: url('images/user_plum.png');
...
在所有浏览器中都可以正常工作。它在Android的cordova版本中工作正常。在iOS Cordova中运行正常。现在,仅在iOS中,我所有使用此技术的图标都是不可见的,即使它们仍然可以单击并起作用。
在两个用户的iPhone上发现了问题,我在iOS Simulator中重现了该问题。我的iPhone工作正常。卸载/重新安装应用程序,重新构建/重新启动服务器等,未进行任何更改。在我将手机更新到iOS 11.4之前,现在我的手机也出现了问题。如果我从CSS中删除了-webkit-mask-image行,那么我通常会在图标应位于的位置获得正确的背景色正方形。该模拟器测试和其他模拟器测试清楚表明,仅当使用-webkit-mask-image时,不可见图标才在iOS设备和模拟器上发生。是否有人知道iOS 11.1和11.4之间的任何更改都会破坏Cordova Webview对-webkit-mask-image的处理?
最佳答案
我在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,然后是第二个蒙版!)