Не работает маска изображения CSS в Cordova для iOS 11.x?

Question

Я использую -webkit-mask-image в моем метеорном приложении, например:

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

Отлично работает во всех браузерах. Он отлично работает в версии Cordova на Android. Это было нормально работает в iOS Cordova. Теперь только в iOS все мои иконки, использующие эту технику, невидимы, хотя они по-прежнему активны и активны.

Проблема была обнаружена на iPhone двух пользователей, и я воспроизвел ее в iOS Simulator. Мой айфон работал нормально. Деинсталлируйте / переустановите приложение, перестройте / перезапустите сервер и т. Д., Ничего не изменилось. Пока я не обновил свой телефон до iOS 11.4, и теперь у моего телефона тоже есть проблема. Если я удаляю эту строку -webkit-mask-image из CSS, я всегда получаю правильный квадрат цвета фона, где должна быть иконка. Это и другое тестирование на симуляторе показывает, что невидимые значки появляются только на устройствах iOS и на симуляторе, и только если используется -webkit-mask-image. Кто-нибудь знает о каких-либо изменениях в iOS между 11.1 и 11.4, которые могли бы нарушить обработку -webkit-mask-image в Cordova webview?

Answer 1

Хорошо, эта проблема вполне реальна, я провел кучу тестов, установил различные версии inappbrowser и т. Д., Но все безрезультатно. Но вот обходной путь (спасибо @JamesMontagne за ответ и jsfiddle на Можно ли как-нибудь раскрасить белое PNG-изображение только с помощью CSS? , который заставил меня его опробовать):

Просто используйте -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: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.

Но это работает, когда -webkit-mask-image нет, поэтому я собираюсь с этим сейчас.

Кроме того, fyi, user_plum.png - это прозрачный png с изображением значка цвета сливы. Неважно, какого цвета непрозрачная часть, в этой маскировке не выполняется цветовая математика. Значок не должен быть белым для работы (многие веб-страницы по темам маскировки CSS включают обсуждения белых или черных масок).