Closed Bug 1500687 Opened 7 years ago Closed 7 years ago

color:inherit not working on anchor element

Categories

(Firefox for Android Graveyard :: General, defect)

Product:
Firefox for Android Graveyard
Component:
General
Platform:
ARM
Android
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED INVALID

People

(Reporter: wdo362, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0 Steps to reproduce: Specifying color:inherit to an anchor element in a css stylesheet does not inherit the color of the parent element. Actual results: Color of the anchor element did not change. Expected results: Color of the anchor element should change to the color of the parent element if explicit set to inherit similar to Firefox for Windows or Internet Explorer.
Hello and thank you for the report, could you provide a test case for this?
Flags: needinfo?(wdo362)
OS: Unspecified → Android
Hardware: Unspecified → ARM
I have tried to reduce the html to a minimum. Open the following html file with FF for Android and Windows and see the difference: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <meta http-equiv=content-type content="text/html;charset=utf-8"> <style type="text/css"> body{font-family:arial,sans-serif;font-size:14px;margin:0;padding:10px} table{background-color:#aaa;border-color:#aaa;border-spacing:1px;border-style:solid;border-width:2px} th{text-align:left;padding:5px;cursor:default;color:#444;position:relative} th.colHeader{background-color:#c4fff3} th[class*='colSeverity'],th.colLink{text-align:center} th[class*='colGroup']{background-color:#c4fff3;text-align:center} td{padding:5px;line-height:25px;white-space:nowrap} td[class*='colSeverity'],td.colLink{text-align:center;font-size:21px;padding-left:20px;padding-right:20px} tr.oddRow{background-color:#efefef} tr.evenRow{background-color:#d6d6d6} td.warn{color:#f99a14} td.ok{color:#45b981} td.error{color:#c03737} td a{text-decoration:none;color:inherit} </style> </head> <body> <table id=mainTable class=mainTable> <thead> <tr> <th class="colReport colHeader">Report</th> <th class=colGroup-colSeverity>Severity</th> </tr> </thead> <tbody> <tr class=oddRow> <td class=colReport>Status</td> <td class="colSeverity-3 error"><a href="/status.html">&#9899;</td> </tr> </tbody> </table> </body> </html>
Flags: needinfo?(wdo362)
Tested this and only devices with Android 5 or lower seem to be affected by this, could not reproduce the issue on devices with greater or equal to 6. As additional information, Chrome and FF displayed the same behaviour so this does not seem to be an issue with FF as much as Android itself. With these findings I am closing the issue, thank you again for your report and if you find any other issue in the future please fire up a new bug for it.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
Version: Firefox 61 → Trunk
Just for the records: I tested this on an Samsung Galaxy Tab S3 with Android 8.0 and the issue occurs on this device also.
We also have that device on hand and I've tested the issue with it as well, sadly it did not reproduce for me on the Galaxy Tab S3. I was using a fresh install of FF on the device. Did you try reinstalling FF to see if the issue is still reproducible on your device?
Flags: needinfo?(wdo362)
Just removed FF and reinstalled release 63. Problem persists.
Flags: needinfo?(wdo362)

Sorry for being resistant but I want to address this issue once again, as the same strange behavour is now also shown in FF ESR 60 on Windows platform. The HTML snipped I posted above was shown (IMHO) correctly in FF ESR 52 and IE 11 and is now also broken in FF ESR 60.

As I now can use FF dev tools I was able to do some further tests which leads to the following perception:

The content of the <a> element from the example is a unicode symbol (⚫) which no does not inherit its color form the parent element any longer. If I change that to a normal letter like "A" or "B" the color is inherited.

Is this the expected behavour and when why has this changed from ESR 52 to ESR 60 and is also now different from IE11?

THX for you attention.

Just for the record I answer my own question.

It seems that the behavour is caused by a change in Firefox to support latest unicode standards, where unicode characters not necessarily have to be rendered as text. For this reason you have to be very careful when choosing unicode characters as different browsers may handle this differently.

For Firefox a workaround for at least some characters is to append the variation selector 15 to the character code which should force the character to be rendered as text style and as such then honors css color attribute.

A short explanation of the underlying basic can be found here:

http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.