在iOS 11.x的Cordova中损坏的CSS图像蒙版? [英] CSS image mask broken in Cordova for iOS 11.x?

问题描述

我在流星应用中使用-webkit-mask-image，如下所示:

I use -webkit-mask-image in my meteor app, like this:

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

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

It works fine in all browsers. It works fine in the cordova version on Android. It was working fine in iOS Cordova. Now, only in iOS, all of my icons that use this technique are invisible, even though they are still clickable and functioning.

在两个用户的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的处理?

The problem was found on two users' iPhones and I reproduced it in iOS Simulator. My iPhone worked fine. Uninstall/reinstall of the app, rebuild/restart of the server, etc., nothing changed. Until I updated my phone to iOS 11.4, and now my phone has the issue, too. If I remove that -webkit-mask-image line from the CSS, I universally get the proper background-color'ed square where the icon should be. That and other simulator testing makes it clear the invisible icons are only happening on iOS devices and simulator, and only if -webkit-mask-image is in use. Is anyone aware of any changes in iOS between 11.1 and 11.4 that would break Cordova webview's handling of -webkit-mask-image?

推荐答案

我在iOS中为Everyicon的两行编码都解决了这个问题:

I solved it in iOS coding both lines for 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，然后是蒙版！)

to the CSS icon... and for some strange reason got to be in THAT ORDER (webkit first, and mask second!)

这篇关于在iOS 11.x的Cordova中损坏的CSS图像蒙版?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！