My website's CSS is interpreted differently (in Firefox only) after v.47
Hello, Can anyone help me figure out what might be causing almost all of my pages text to appear white on white background. We have made no changes to the website CSS or code. It's been going on since Firefox v.47 was released earlier year. The website text is fine in all other browsers (IE, Chrome, Edge)
URLs for replication: http://okeania.bg/%D0%9F%D0%BE%D1%87%D0%B8%D0%B2%D0%BA%D0%B0-%D0%B2-%D0%9A%D0%BE%D1%81%D1%82%D0%B0-%D0%B4%D0%B5%D0%BB-%D0%A1%D0%BE%D0%BB-135.html
Chosen solution
On line 121 of this file:
http://okeania.bg/css/bootstrap.css
You have:
color:#0000;
Traditionally, black is indicated using either:
color:#000; color:#000000;
Prior to Firefox 49, Firefox would have disregarded the four digit value as an illegal value. Starting in Firefox 49, it interprets the fourth digit as the "alpha" or "opacity" of the color indicated by the first three digits. So #0000 is equivalent to black at 0% opacity (completely transparent).
https://developer.mozilla.org/docs/Web/CSS/color_value#rgba()
I suggest changing it back to #000 rather than trying to figure out the rules of different browsers on this...
Read this answer in context 👍 1All Replies (3)
Sorry but I do not have the knowledge to answer this fully, but perhaps some of this information is of help:
First indications are that you may be correct as I tested with Fx45.5.1 esr and see apparently the correct rendering whereas in a working Firefox profile on Release Fx50 it is presumably white on white as I do not see a lot of the text. I am not a web designer and so I do not understand what is actually happening.
Does using the built in Inspector to look at the rules of highlighted areas help you determine what is happening ?
And the release related notes may give a clue about relevant Firefox changes
Chosen Solution
On line 121 of this file:
http://okeania.bg/css/bootstrap.css
You have:
color:#0000;
Traditionally, black is indicated using either:
color:#000; color:#000000;
Prior to Firefox 49, Firefox would have disregarded the four digit value as an illegal value. Starting in Firefox 49, it interprets the fourth digit as the "alpha" or "opacity" of the color indicated by the first three digits. So #0000 is equivalent to black at 0% opacity (completely transparent).
https://developer.mozilla.org/docs/Web/CSS/color_value#rgba()
I suggest changing it back to #000 rather than trying to figure out the rules of different browsers on this...
Or possibly a script is supposed is supposed to be used with that style rule to "fade in" the transparent text and the script isn't running or isn't working correctly in Firefox 50.