IOS 9 удалил возможность изменить определенные цвета символов с помощью CSS

Мы использовали различные символы, такие как галочки (✔) на нашем веб-сайте, и просто заметили, что с выпуском iOS 9 Safari и другие браузеры были обновлены, чтобы не учитывать атрибут цвета. Такое же поведение можно найти и в Safari, и в Chrome на iOS 9.

<div>test ✔</div>

div  {
   color: #ff0000;
   -webkit-appearance: none;
}

https://jsfiddle.net/afb14b2k/1/

Приведенный выше пример хорошо отображается на других платформах (например, OS X). Есть ли известное обходное решение, чтобы заставить это работать на iOS 9?

Изменить: Похоже, что это относится только к определенным вариантам флажков (и других вариантов символов). В этом случае мы использовали тяжелую галочку (U + 2714). При переключении на обычную галочку (U + 2713) iOS не применяла к ней никакого форматирования, и мы могли применить к ней особый цвет.

Ответ 1

В iOS 9, U+2714 HEAVY CHECK MARK включен в набор символов emoji Apple. Как и другие emojis, он нарисован как полноцветный растровый рисунок вместо одноцветного векторного глифа, поэтому вы не можете изменить его цвет с помощью CSS. (На самом деле, нет гарантии, что галочка будет даже черной. Другие платформы рисуют ее разными цветами!)

Чтобы заставить iOS нарисовать галочку как обычный текст, который вы можете перекрасить, вам нужно использовать символ U+FE0E VARIATION SELECTOR-15. Если вы поместите этот символ выбора вариации сразу после ✔, iOS будет использовать обычную текстовую версию (✔ & # xfe0e;) вместо версии emoji (✔). OS X не имеет варианта emoji, поэтому они выглядят одинаково, но на iOS варианты выглядят несколько иначе:

В HTML вы можете добавить символ, поставив ︎ непосредственно после ваших галочек.

div {
  color: red;
}

<div>
  ✔ without variation selector<br>
  ✔&#xfe0e; with variation selector
</div>

Ответ 2

Если вы пытаетесь стилизовать элемент с помощью CSS-after, это делается, чтобы убедиться, что значок становится зеленым в iOS. Только "✔" iOS не изменит цвет значка.

.myElement:after {
  color:green;
  content: "✔\fe0e";
}