У меня проблема с приложением Cordova. Эта проблема появляется только на iOS. В моем приложении я использую различные SVG, эти SVG чаще всего используются с
background: url('../path/test.svg')
Теперь я реализовал функцию Темы, которая позволяет мне менять цвет моего приложения. Все мои SVGs по умолчанию белые, и я использую javascript для расчета фильтров: invert (), sepia (), saturate (), hue-rotate (), birghtness (), контраст (), чтобы «окрасить» мой SVG в цвет Я хочу. Например. Я хочу красный, я вставляю цвет # FF0000 и затем вычисляю фильтры. Чтобы применить раскраску к svg в моем приложении, я просто добавляю CSS-класс «filter-icon», который затем окрашивает элемент с помощью этих фильтров.
Это прекрасно работает на Android при сборке с Cordova! Но на iOS мои изображения начинают мерцать, и иногда отображаются неправильные изображения неправильных цветов.
Я видел в сети, что вам нужно добавить строку:
-webkit-transform: translateZ(0)
к рассматриваемым элементам, поэтому iOS использует ускорение для применения фильтров. НО тогда цвет не правильный. Вы можете увидеть это на моих скриншотах (всегда выделены зеленым цветом). Во-первых, это приложение с отключенным параметром -webkit-transform: translateZ (0) (где вы можете видеть, что появляются неправильные изображения в странных цветах), а во-вторых, это приложение с включенным свойством css, где вы можете видеть цвет значков. изменилось.
Кто-нибудь знает, что здесь не так?
Мне известно, что решение с использованием SVG с background: url ('../ path / test.svg') не является хорошим, и использование встроенных SVG позволило бы мне более легко их раскрасить. Но также очень удобно, что я могу просто наложить класс filter-icon на белое изображение, и оно преобразуется в изображение / иконку этого цвета.
вся помощь очень ценится!