Search code examples
cssiosunicodesafariwebkit

Why does this cross sign stay gray in Safari iOS?

I just spent too much time figuring out why my <button> doesn't want to display white text color on iOS Safari. It's a button to close modal, defined like this:

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

Here's what I got:

Button with gray cross, yikes!

I was sure I'm missing something about, as we all know that buttons are not the easiest to style. But after applying color: #fff; and -webkit-appearance: none I expected it to work. I finally thought of trying other characters and, for my surprise, here's the result:

Button with some wild crosses

Apparently my CSS was correct, it was the character itself to blame. Now, I'm really curious what happened. At first I thought that maybe that cross of my choice was emoji, but doesn't seem to be. The first one is just a regular capital X (1 byte) and all others are 3 bytes. Emoji are 4 bytes, right?

My question, mostly for my curiosity, is: why does this cross stay gray?

For reference, here's the crosses I tested: X ✕ ☓ ✖ ✗ ✘, the fourth one being the one. The font I used is Tahoma, but I'm not sure if that matters for Unicode characters after all. The problematic cross sign is called HEAVY MULTIPLICATION X (U+2716).

Solution

  • Mystery solved. This particular cross character has its very close emoji brother. The cross itself is U+2716, which is decimal 10006.

    But there's also emoji, which looks almost exactly the same, except being grey (at least in Apple's interpretation) and with mild shadow. This emoji is made of two combined characters:

    1. The same U+2716 cross
    2. A character called VARIATION SELECTOR-16, being U+FE0F or decimal 65039

    It looks like Safari on iOS converts U+2716 to its emoji counterpart under some circumstances. One of those cases is putting it inside the <button>.