Shorcode executes twice

My shortcode is a [spoiler]Text[/spoiler] tag that is supposed to black out the text.

This is pretty easily achieved with some inline js and css. In my stylesheet I have,

.spoiler { background: #ccc; cursor: pointer; }

And then in my functions.php I have,

function spoiler_shortcode ( $atts, $content = null ) {
    // Spoiler shortcode
      //inline js for the effect.
      return '<span class="spoiler" onclick="this.className=\'\'">' . $content . '</span>';
}
add_shortcode( 'spoiler', 'spoiler_shortcode' );

Then in my post I have this:

[spoiler]Text to be hidden[/spoiler]

Now, I know I'm not crazy, but I'm expecting my output to be:

<span class="spoiler" onclick="this.className=''">Text to be hidden</span>

But my output is,

<span class="spoiler" onclick="this.className=''">Text <span class="spoiler">to be hidden</span></span>

Which is odd and very frustrating.

EDIT

My problem appears not to happen when posts are published, only when they are in preview mode. Odd. As such, I'm not too concerned about it, but I would still like an answer if anyone has one.