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

Question

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

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

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.

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?

Coniology

Answer 1

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);

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

Vashtivashtia

Cool. I'm accepting this as the answer, even though my own answer below works, because -webkit-mask-box-image has the non-standard warning, and this doesn't. – Coniology

Answer 2

Okay, this problem is very real, I've done a bunch of tests, installed different flavors of inappbrowser, etc., all to no avail. But here's a workaround (thanks to @JamesMontagne for the answer and jsfiddle at Is there any way to colorize a white PNG image with CSS only? that led me to try it out):

Just use -webkit-mask-box-image instead of -webkit-mask-image.

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

This continues to work on all the platforms it already worked on, but also works in this iOS 11.x Cordova environment in which it -webkit-mask-image had broken.

To be clear, -webkit-mask-box-image carries the "non-standard" warning in the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.

But it works when -webkit-mask-image doesn't, so I'm going with it for now.

Also, fyi, user_plum.png is a transparent png with a plum-colored icon image. It doesn't matter what the color of the non-transparent part is, there's no color math being done in this masking. The icon doesn't have to be white to work (many web pages of css masking topics include discussions of white or black masks).

Coniology