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

RESOLVED WORKSFORME

Status

()

Core
Layout: Text
P3
normal
RESOLVED WORKSFORME
2 years ago
9 months ago

People

(Reporter: victor, Unassigned)

Tracking

47 Branch
x86_64
Windows 10
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8764207 [details]
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.
(Reporter)

Updated

2 years ago
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64

Updated

2 years ago
Component: Untriaged → Layout: Text
Product: Firefox → Core
Summary: specific unicode character (magnifying glass icon) does not follow text color → specific unicode character U+1F50E (magnifying glass icon) does not follow text color

Updated

11 months ago
Priority: -- → P3
(Reporter)

Comment 1

11 months ago
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.
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.
(Reporter)

Comment 3

11 months ago
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.
(Reporter)

Comment 4

11 months ago
Created attachment 8887409 [details]
Fixed in 54.0.1 (32-bit)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 months ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.