Почему этот крестик остается серым в Safari iOS?

Question

Я потратил слишком много времени на выяснение того, почему мой <button> не хочет отображать белый цвет текста на iOS Safari. Это кнопка для закрытия модального режима, определяемая так:

<button type="button">✖</button>

Вот что я получил:

Я был уверен, что я Я что-то упускаю из-за того, что все мы знаем, что кнопки не так просты в стиле. Но после применения color: #fff; и -webkit-appearance: none я ожидал, что это сработает. В конце концов я подумал о том, чтобы попробовать другие символы, и, к моему удивлению, вот результат:

Видимо, мой CSS был правильным, это был персонаж сам виноват. Теперь мне действительно любопытно, что случилось. Сначала я подумал, что, возможно, этот крест моего выбора был эмодзи, но, похоже, не так. Первый - это обычная заглавная буква X (1 байт), а все остальные - 3 байта. Emoji - 4 байта, верно?

Мой вопрос, в основном для любопытства, таков: почему этот крест остается серым?

Для справки, вот проверенные мной кресты: X ✕ ☓ ✖ ✗ ✘, четвертый - тот. Я использовал шрифт Tahoma , но я не уверен, имеет ли это значение для символов Юникода в конце концов. Проблемный знак c называется ТЯЖЕЛЫЕ УМНОЖЕНИЯ X (U + 2716).

Answer 1

Тайна раскрыта. У этого конкретного кросс-персонажа есть очень близкий эмодзи-брат. Сам крест - U+2716, который является десятичным 10006.

Но есть также эмодзи, которые выглядят почти одинаково, за исключением того, что они серые (по крайней мере, в интерпретации Apple) и с мягкой тенью. Этот эмодзи состоит из двух комбинированных символов:

1. Тот же U+2716 крест
2. Символ с именем VARIATION SELECTOR-16, являющийся U+FE0F или десятичным 65039

Похоже, Safari на iOS преобразует U+2716 в своего смайлика при некоторых обстоятельствах. Один из таких случаев помещает его внутрь <button>.

Answer 2

К сожалению, смайлики не работают так же. Некоторые из них являются текстовыми символами, а некоторые просто эмодзи. Я делаю этот простой трюк, и это работает большую часть времени:

element {
  color: transparent;  
  text-shadow: 0 0 0 green;
}