1281433 - specific unicode character U+1F50E (magnifying glass icon) does not follow text color

Status: RESOLVED WORKSFORME

(Core :: Layout: Text and Fonts, defect, P3)

Description

[victor]

Attachment: screenshot of the problem in firefox 47.0

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160604131506

Steps to reproduce:

I added unicode character U+1F50E to a webpage and tried to color it red. 

See https://jsfiddle.net/72b6r5dq/


Actual results:

Unicode character U+1F50E does not follow the text color (i.e. it stays black instead of red). Other unicode characters I have tried do not show this problem. It seems to be specific to this character. I have found a workaround in prefixing this character with an unicode invisible separator U+2063.

See https://jsfiddle.net/72b6r5dq/


Expected results:

I expected the magnifying icon to become red.

Comment 1

[victor]

I must admit I sort of forgot about this bug. Running the same jsfiddle in 54.0.1 (32-bit), it seems that the magnifying icon is not responding to the text color at all anymore, even when prefixed with the invisible separator. It looks like a blue tinted glass, with a red handle, regardless of the text color.

Comment 2

[Jonathan Kew [:jfkthame]]

The behavior will depend on what font is used for the character; when it is rendered with an emoji-style font (such as Segoe UI Emoji), any CSS text color will be ignored because the glyph is inherently colored. This is expected behavior. Symbols rendered from non-emoji "text" fonts (like Segoe UI) will of course respond to CSS color as usual.

Comment 3

[victor]

Your comment lead me to this site: https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascript where I was introduced to the FE0E suffix. That seems to help: https://jsfiddle.net/72b6r5dq/5/ Also, changing the font explicitly to Segoe UI Symbol seems to work: https://jsfiddle.net/72b6r5dq/4/

So, now the magnifying glass symbol is rendered once again like a text-symbol.

It appears, however that the underlying problem has been resolved, for now the magnifying glass symbol follows the text color both with and without the invisible space symbol. 

Anyway, it seems fixed somehow in my current version of firefox 54.0.1 (32-bit) and so I think this report can be closed.

Comment 4

[victor]

Attachment: Fixed in 54.0.1 (32-bit)