Menu
Bit of a confusing one, the color attribute is respected on the desktop version of Safari but not on mobile.
I tested it on an iPhone 5 (iOS version 9.2.1).
Sample code (first span will appear black on safari mobile):
<html>
<head>
<style>
span { color: white; }
</style>
</head>
<body>
<span>✖</span>
<span>×</span>
<span>×</span>
</body>
</html>
and JSFiddle link: https://jsfiddle.net/9t3v8846/
Adding !important didn't do anything. Any ideas what might be causing this?
231
If any poor people come across this.. the way to fix this is to add a variation selector after the entity like so:
<span>✖︎</span>
Essentially what is going on under the covers is that the browser decides how to render the HTML entities.
Safari on iOS prefers to use Emoji-like rendering where possible so it ignores the CSS attribute. The variation selector used above specifies that we want to use text-like rendering causing Safari to now respect any color attributes applied to it.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
