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

Я использую -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, которые нарушили бы обработку Cordova webview -webkit-mask-image?


ios cordova webview css image-masking
person RealHandy    schedule 27.06.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил это в iOS, кодируя обе строки для каждого значка:

-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... и по какой-то странной причине он должен быть в ТАКОМ ПОРЯДКЕ (сначала вебкит, а потом маска!)

person Ari Waisberg    schedule 16.10.2019
comment
Прохладно. Я принимаю это как ответ, хотя мой собственный ответ ниже работает, потому что -webkit-mask-box-image имеет нестандартное предупреждение, а это нет. - person RealHandy; 17.10.2019

arrow_upward
4
arrow_downward

Хорошо, эта проблема вполне реальна, я сделал кучу тестов, установил разные варианты 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 не работает, поэтому я пока использую его.

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

person RealHandy    schedule 28.07.2018