Did any come across this buggy thingy with jquery `draggable` before when you add `right: 0; bottom: 0;` to your popup box?

The box **jumps** away from your cursor when you **click on** the `handler`

jquery,

    $(".popup").draggable({ 

    cursor: "move",

    handle: ".popup-outer",

    cancel: ".popup-inner"

    });

html,

    <div class="popup-outer popup">

        <div class="popup-inner">

            <div class="box-close"><a href="#" class="button-close">x close</a></div>

            <div class="ajax-response"></div>

        </div>

    </div>

css,

    .popup-outer{

        position:absolute;

        

        top:0;

        left:0;

        right: 0; //this causes the bug

        bottom: 0; //this causes the bug

    

        max-width: 1000px;

        height:500px;

        margin: auto;

    

        padding:6px;

        -moz-border-radius:4px;

        -webkit-border-radius:4px;

        border-radius: 4px; 

        background: url(../image/trans_black.png);

    }

   

    .popup-inner {

        text-align:left; 

        background-color:#ffffff; 

        margin:0px; 

        padding:20px;

        overflow:hidden; 

        -moz-border-radius:2px;

        -webkit-border-radius:2px;

        border-radius: 2px;

        border:0px solid #999;

        color:#333333;

        

        border:0 solid red;

        

        cursor:default;

    }

any idea how can I fix it?