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.
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
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.
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.