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

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... Spoiler Warning! ...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.

share|improve this question
    
Or maybe link descriptions aren't hidden in the preview. I don't see the problem with that now that the question is published. So just the image problem then. –  Jon Ericson Oct 28 '11 at 21:49
    
The image was stolen from the Spoiler Warning Let's Play video series, in case you were wondering. –  Jon Ericson Oct 28 '11 at 21:56
    
While still hoping for a proper fix from the SE folks, I've included a client-side fix for this (and a bunch of other spoiler CSS issues) in SOUP v1.6. –  Ilmari Karonen Feb 10 at 14:06
    
I wonder why it works on Arqade, but not here. –  3ventic Mar 11 at 20:25
    
This seems to be fixed here and on Seasoned Advice, but it's still broken on SO. –  Ilmari Karonen May 10 at 23:06

3 Answers 3

up vote 14 down vote accepted

The "spoiler" block hides the text by making it the same color as the background. This has a number of advantages, but the primary one is probably that it lets you select the text and continue to view it even if you can't manage to keep a mouse cursor hovering over it. If they'd used a technique that actually removed the text from the page, or styled it hidden, you'd have a rough time trying to copy it.

If you have an image you don't want folks to see before they're warned, there's a really, really easy way to accomplish this: just link to it.

Remember, spoilers are supposed to be rare, and fairly light-weight. They throw one more roadblock between the reader and the text he's looking for.

That said, it's worth noting that this does work now... On certain sites.

share|improve this answer
    
Ah. Much nicer. Thank you. –  Jon Ericson Oct 28 '11 at 21:57
    
That does look much nicer ;-) –  Shog9 Oct 28 '11 at 22:03
    
Since the behavior doesn't match the user's expectation, I'd still cause this a bug even now that I understand what happened. But the fix is probably a sentence or two in the documentation. Perhaps just the middle paragraph of this answer would suffice. –  Jon Ericson Oct 28 '11 at 23:04
    
Well, it does say "To hide a certain piece of text..." But yeah, I'll keep this in mind for the future - I'd kinda like to see the documentation be a bit more prescriptive about how/when the tag should be used as well. –  Shog9 Oct 28 '11 at 23:31
1  
Ahhh! You scarred me for life! I am going to cry now. Remind me to -1 you once I finish. –  muntoo Oct 28 '11 at 23:53
    
I have no problem selecting text on the (nice!) spoiler implementation on the mobile theme. –  Arjan Jul 6 '12 at 4:57
    
If they are collapsible then this would solve both the image and touchscreen problems –  bobobobo Sep 24 '12 at 18:07

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

share|improve this answer
    
I asked about this once upon a time and balpha said that although he couldn't remember what it was, there was some reason why visibility: hidden would have caused some issues. –  Tim Stone 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.

share|improve this answer

You must log in to answer this question.

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