jQueryUI dialog position bug

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<h2>jQuery UI dialog drag positioning bug</h2>
<p>When trying to drag a jQuery UI dialog that is positioned in a scrolled down viewport, the dialog will unexpectedly jump out of sight. This example will demonstrate.</p>
<ul>
<li>The bug seems to appear in: Firefox 29.0.1, Internet Explorer 9 &amp; 11 (on Windows 7 x64)</li>
<li>The bug does not seem to appear in: Safari 5.1.7, Chrome 35</li>
</ul>
<p>1) Scroll down</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>Keep going <button onclick="$('#c1').toggle()">+/-</button></p>
<div id="c1">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<p>OK, just a little more <button onclick="$('#c2').toggle()">+/-</button></p>
<div id="c2">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<p>2) <button id="popup_open">Click to open dialog</button></p>

<div id="dialog">
    <p>Try to move this dialog around on the screen by dragging it by the title bar. You will notice that it jumps out of sight.</p>
</div>

CSS

#dialog { display: none; }

JavaScript

$('#popup_open').on('click', function(event){
    $('#dialog').dialog();
});