Jquery UI Resizable() right side bug

When resizing a div with the handle on the 'westside' attached to the right side of the browser window. strange behavior.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div id="left_slide_panel">
    fdsf sfds fds
</div>

<div id="right_slide_panel">
    gdfg dfgfđ 
</div>

CSS

#left_slide_panel, #right_slide_panel{
position:absolute;
top:0;
height:100%;
}
#left_slide_panel{
left:0px;
padding-right:20px;
z-index:10;
}
#right_slide_panel{
right:0px;
z-index:20;
}

JavaScript

$(document).ready(function() {

// init
var leftPanel = $("#left_slide_panel");
var rightPanel = $("#right_slide_panel");

$(".panel_content", rightPanel).resizable({
     minWidth: 100,
     maxWidth: '100%',
      handles: 'w', 
});


});