draggable object :: containment: 'parent' breaks it (except firefox)

draggable object :: containment: 'parent' breaks it (except firefox)


hello community,
i am using a parent and child div. the child div is supposed to be
dragged from left to right within the parent div. everything works
fine, but as soon as i specify: "containment: parent" it just doesn't
work anymore in e.g. safari. it still works in firefox.
below my code, this issue really only takes place if i specify
containment, if i delete the line in my JS code, than it works on all
brothers (ff and safari).
your help is much appreciated!
thanks in advance
---------------- JS ----------------
$(document).ready(function(){
$("#child").draggable(
{
axis: 'x',                // only move horizontally
containment: 'parent', // DELETE THIS LINE AND IT WORKS....
drag: function(ev, ui)            // while object is dragged, do this:
{
var left = ui.position.left;
console.log("child position: " + left);
}
});
});
---------------- CSS ----------------
#parent { width: 960px; height: 50px; background: pink; }
#child { width: 70px; height: 40px; margin: 0 auto; background:
green url(../img/regler.png) no-repeat; }
---------------- HTML ----------------
<div id="crossfader">
<div id="regler"></div>
</div>