Update:
It appears the particular problem I described below affects Linux versions of Chrome only (and maybe only a specific Linux version).
However, the general strategy of setting the same rbga
value for color
and background-color
to make the text invisible doesn't seem to work on any browser. If you zoom in closely even on a "working" browser you can very faintly (much more faintly than in the screenshot I posted) see the "invisible" text on the linked meta post from the original question.
It's much easier to see the effect when you choose a different color: see this jsfiddle. Though it uses the "same" color for the background and foreground, the text is visible (on every browser I tested).
Original Question:
The default styling for beta SE sites has blockquote
styled as
background-color: rgba(245, 245, 245, 0.8)
and the "spoiler tag" style for .spoiler, .spoiler a
is
color: rgba(245, 245, 245, 0.8);
(There's a "fallback" style with a color of #eee
in both cases, but things are ordered so that browsers that understand rgba()
will use these.)
On Firefox this seems to work perfectly, the content of spoiler tags is completely hidden before you hover over them.
On Chrome (14.0.835.202), however, the text is visible. Fainter than normal, but visible. See this post on the RPG beta meta for an example, and the following screenshot of Chrome's rendering (the top two blockquotes are spoilers, the bottom one isn't):
Clearly Chrome is treating the "translucent on top of translucent" styling differently than Firefox is (though exactly how each is treating it is somewhat of a mystery to me). I'm not sure if this change is due to an update in Chrome, or a change in the default styles (the sites with custom CSS seem to mostly just have #eee
for these colors).
Anyway, as long as RBGA values are being used, is there any reason not to simply set a value of zero for the alpha channel (or opacity
of zero) in .spoiler .spoiler a
, since the goal is to make the text not appear? In my limited testing this works for both Firefox and Chrome.
color: rgba(...)
(and thus allowing thecolor: #EEE
to be used) or set the alpha channel to 0 in thergba()
setting, the spoiler text disappears as it should.