17

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.

|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
  • 1
    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 '14 at 14:06
  • 1
    I wonder why it works on Arqade, but not here. – 3ventic Mar 11 '14 at 20:25
  • 1
    This seems to be fixed here and on Seasoned Advice, but it's still broken on SO. – Ilmari Karonen May 10 '14 at 23:06
14

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

|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. – Mateen Ulhaq 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
3

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

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

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.

|improve this answer

You must log in to answer this question.

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