2

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.

Improve this question
8
  • 4
    Not reproducible for me on Chrome 15.0.874.83, and I've never had a problem on any other Chrome version.
    – user154510
    Oct 12, 2011 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, 2011 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, 2011 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, 2011 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, 2011 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, 2011 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, 2012 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, 2012 at 6:33

2 Answers 2

Reset to default
2

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

Improve this answer
0

Since this is really a duplicate of Is the spoiler broken, for adjacent paragraphs? which has been resolved as , this one should be too.

Improve this answer

You must log in to answer this question.

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