11

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>&#10006;</span>
      <span>&times;</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?

mikespitz_8
  • 380
  • 3
  • 8

2 Answers2

27

If any poor people come across this.. the way to fix this is to add a variation selector after the entity like so:

<span>&#10006;&#xFE0E;</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.

mikespitz_8
  • 380
  • 3
  • 8
  • Works perfect! Thank you very much! This nut made my head ache for a while. – Gjermund Dahl May 18 '16 at 20:29
  • 1
    Nice. Can we do this for escaped characters in CSS? I tried using \fe0e after escaped character, but no joy. Tested on iPad. – TBB Jul 06 '16 at 08:03
  • In some Outlook versions, ︎ displays as a visible character, i.e. a nonprinting rectangle. Using visibility: none has no effect in Outlook. Using display: none; results in mobile Safari not seeing the entity, so the color declaration is not applied. In short -- this doesn't appear to be a useable solution for HTML email. – VanAlbert Aug 29 '16 at 16:13
  • 1
    This is probably down to outlook's rendering engine. Have you tried a different way of displaying it? The following is what I had to use to get it to work in ::after content. It's double escaped for me so perhaps either: \\2716\\fe0e or \2716\fe0e may do the trick? – mikespitz_8 Sep 05 '16 at 10:20
  • Am I crazy or does IE render the variation selector as a blank square? –  Feb 11 '19 at 17:56
  • 1
    Thank you! BUT- how did you ever figure this out? – J Griffiths May 08 '19 at 18:21
  • @mikespitz_8 can you please elaborate a bit on this, can you please explain what is this ︎ and how did you figure this out, this is interesting. – Rajath M S May 22 '19 at 10:47
  • I filed a defect with the webkit team and they came back explaining it to me. This is a couple years ago! But if I remember correctly this character: ︎ tells Safari to not use its default emoji-renderer but to use the text-renderer instead. This answer explains it a bit better than I can https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip – mikespitz_8 Jun 15 '19 at 16:51
  • `©︎` This worked for me, now I can give the © symbol a color on Safari! – Ben Winding Apr 08 '23 at 00:50
-2

If you are using less try this

@baseColor: #ffffff;

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    color:@baseColor
}
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142
  • No luck on that either I'm afraid. – mikespitz_8 Mar 11 '16 at 15:57
  • The question has to do with browser specific rendering. – jeanfrg Apr 05 '17 at 12:14
  • Just try to test your example. LESS is being finally translated into CSS. Your LESS snippet will finally end up with exactly the same CSS code as provided in question. In fact, your answer says: try the same CSS rule that is provided in your example, there should happen some magic if you will get it translated from LESS instead of just putting it into style tag! – Евгений Савичев Aug 04 '17 at 13:05