iOS 9 eliminó la posibilidad de cambiar ciertos colores de símbolos mediante CSS

Hemos utilizado varios símbolos, como las marcas de verificación (✔) en nuestro sitio web, y hemos notado que con el lanzamiento de iOS 9, Safari y otros navegadores se han actualizado para no respetar el atributo de color. El mismo comportamiento se puede encontrar en Safari y Chrome en iOS 9.

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

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

El ejemplo anterior se muestra bien en otras plataformas (por ejemplo, OS X). ¿Hay alguna solución conocida para hacer que esto funcione en iOS 9?

Editar: parece que esto solo se aplica a ciertas variantes de marcas de verificación (y otras variantes de símbolos). En este caso, estábamos usando la marca de verificación pesada (U + 2714). Al cambiar a la marca de verificación normal (U + 2713) iOS no aplicaba ningún formato y pudimos aplicarle un color personalizado.

En iOS 9, U+2714 HEAVY CHECK MARK se incluye en el conjunto de caracteres emoji de Apple. Al igual que los otros emojis, se dibuja como un bitmap a todo color en lugar de un glifo vectorial de un solo color, por lo que no puede cambiar su color con CSS. (De hecho, no hay garantía de que la marca de verificación sea negra. ¡ Otras plataformas la dibujan en una variedad de colores diferentes!)

Para que iOS dibuje la marca de verificación como texto normal que puede volver a U+FE0E VARIATION SELECTOR-15 , debe usar un carácter U+FE0E VARIATION SELECTOR-15 . Si coloca ese carácter de selector de variación justo después de un ✔, iOS usará la versión de texto normal (✔︎) en lugar de la versión de emoji (✔). OS X no tiene una variante de emoji, por lo que se ven iguales, pero en iOS las variantes se ven ligeramente diferentes:

La versión de texto normal y la versión de emoji en iOS.

En HTML, puede agregar el personaje colocando un siguiendo directamente sus marcas de verificación.

 div { color: red; } 
 
✔ without variation selector
✔︎ with variation selector

Si intentas diseñar el elemento con CSS-after, esta es la forma de asegurarte de que el ícono se vuelva verde en iOS. Con solo “✔”, el iOS no cambiará el color del ícono.

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