Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this community
In an answer, I tried to use the spoiler markdown to hide an image. (It wasn't offensive, but it was unappetizing which seems worthy of hiding on Seasoned Advice.) But the image seems not to be hidden even if the text is. Here's an example:
This line is hidden...
...this image isn't! (This line added to show the problem is not a special case of this question.)
(Oh. Link descriptions aren't hidden either, it seems.)
Why is this?
In case this is browser-specific, I'm using Chrome.
This was fixed a while back, more or less as suggested by Ilmari Karonen, but with the addition of a bit of script to strip the "spoiler" class entirely upon clicking within the spoiler (and to restore it upon clicking again). This allows you to choose whether to briefly view the content (hover) or leave it visible indefinitely (and also works a bit better on mobile devices than the previous system).
The "why" is because the spoiler effect is to just set the foreground text color to the same as the background color, which doesn't help with images. I'm not sure why they did that instead of something like visibility: hidden; possibly so the grey box is still visible to indicate that spoiler text is available, but I would think there are other ways of marking that. Alternatively, there would need to be a special style for img.spoiler that hides images as well
visibility: hidden would have caused some issues.
Oct 28 '11 at 22:28
For the record, there is a better implementation that hides everything and enables copy&paste: use the opacity style element.
Prototype:
<!DOCTYPE html>
<html>
<head>
<title>Spoiler Test</title>
<style type="text/css">
blockquote.spoiler {
background-color : rgb(238,238,238);
padding : 10pt 10pt 1pt 10pt;
}
blockquote.spoiler * {
opacity : 0;
}
blockquote.spoiler:hover * {
opacity : 1;
}
</style>
</head>
<body>
Before spoiler.
<blockquote class="spoiler">
<p>Before image</p>
<img alt="So hidden image!" src="http://i.stack.imgur.com/XjNFy.jpg"/>
<p>After image.</p>
</blockquote>
After spoiler.
</body>
</html>
Don't know about touch devices, though; selected text remains selected when the pointer leaves the spoiler area, but it is no longer shown. I guess you could write a simple user script that "fixes" blockquotes for devices that don't emulate pointers.
