What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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):

enter image description here

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.

share|improve this question
4  
Not reproducible for me on Chrome 15.0.874.83, and I've never had a problem on any other Chrome version. –  Matthew Read Oct 12 '11 at 20:25
2  
It's reproducible for me on Chrome 14.0.835.202. The linked post shows up exactly as the screenshot here. –  CanSpice Oct 12 '11 at 20:44
    
Can't reproduce on Chrome 14.0.835.187 either... Kinda suspect you just got stuck with a bum Chrome version. Try updating? –  Shog9 Oct 12 '11 at 20:45
    
I was beginning to suspect the same... but I think this is the latest stable Chrome. (And I just finally read @CanSpice's comment correctly, which I initially though was another "no repro"). –  John Flatness Oct 12 '11 at 20:49
    
@CanSpice: What OS are you using? After further experimentation, this looks like it's OS-dependent. For me, I get incorrect rendering on Linux, but the same version (14.0.835.202) on Mac works fine. Both are the "official" Google builds. –  John Flatness Oct 13 '11 at 15:43
    
@JohnFlatness: I'm on Linux, so yeah, it looks like it's OS-dependent. And if I use the Developer Tools to either turn off the color: rgba(...) (and thus allowing the color: #EEE to be used) or set the alpha channel to 0 in the rgba() setting, the spoiler text disappears as it should. –  CanSpice Oct 13 '11 at 16:05
    
@Shog9: Also reproducible for me on Chrome 16.0.912.63, on Mac OS X 10.6. So it's not Linux-specific. –  ShreevatsaR Jan 2 '12 at 18:33
    
@Shog9: Sorry for my previous comment... I didn't read the question carefully. My previous comment was about the spoiler tag "breaking" on multiple paragraphs (which was the question on the RPG meta site), which it seems is not a bug but just awkward syntax. It's not related to John Flatness's question here. –  ShreevatsaR Jan 3 '12 at 6:33

1 Answer 1

I haven't yet reproduced what's shown in your screenshots... However,

I found that if I tilt the screen of my laptop far enough, I can just make out that there are lines of text there... It's not readable, but it is apparent. I see the same in Firefox 8 and 9.0.1, and Internet Explorer 9.

I'm wondering now if there might be an issue with some display drivers...

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .