Snippets scroll slightly on mouseover + scroll...

I’m using code mirror to add HTML and JS snippets for a UI style guide. When the mouse is over the div containing a snippet the snippet will move up or down slightly depending on scroll direction.

HTML looks like this:

<pre><code class="code">
<div class="alert alert-message alert-success" role="alert">
    <i class="alert-message-icon"></i>Sucess
</div>
<div class="alert alert-message alert-info" role="alert">
    <i class="alert-message-icon"></i>Info
</div>
<div class="alert alert-message alert-warning" role="alert">
    <i class="alert-message-icon"></i>Warning
</div>
<div class="alert alert-message alert-danger" role="alert">
    <i class="alert-message-icon"></i>Danger
</div>

and the JS looks like this:

$('.code').each(function() {

                var $this = $(this),
                    $code = $this.html();

                $this.empty();

                var myCodeMirror = CodeMirror(this, {
                    value: $code,
                    mode: 'xml',
                    lineNumbers: false,
                    readOnly: true,
                    lineWrapping: true
                });
            });

Any help getting rid of the wobble would be greatly appreciated!

Which browser is this happening in? Are the snippets scrollable? Are they fixed-height or content-height? Does this also happen for you in any of the demos on codemirror.net ?

Marjin - thanks for the help. I figured out the issue which involved a small CSS change.