Bug while resizing a div and scrolling his container at the same time

Problem:

I have a resizable div that's positioned absolutely and it's inside a container positioned relatively, which has a specified width and height and an overflow auto property.

If I try to resize and at the same time scroll the container, the handle for the resizable div won't stay in sync with the mouse cursor. What happens is that during scroll the mouse cursor moves down or up depending on the scroll direction and the handler (in this case the border of the div) stays in the same place.

After that, if you stop scrolling and continue resizing, there is an offset between the mouse cursor and the actual resize handle (the offset size depends on the amount of scroll applied) which can be visually misleading.

Expected behavior: The resize handler should always stay "beneath" or in "sync" with the position of the mouse cursor.

Libray version used (latest at the moment of creating this ticket):

jQuery - 2.2.1

jQuery UI - 1.11.4

jQuery UI Theme Black Tie - 1.11.4

Browser version used (latest at the moment of creating this ticket):

Chrome - 48.0.2564.116

Firefox - 44.0.2

OS version used:

Windows 10

Windows 8.1

Windows 8

Link to reproduce: https://jsfiddle.net/ruspaull/45qh8L1z/1/

I can provide additional descriptions or screen captures if needed. Thanks!

Code example if jsfiddle link stops working:

<div class="wrapper">
  <div class="container">
    <div class="resize-me">
    </div>
  </div>
</div>

.wrapper {
  width: 500px;
  height: 500px;
  padding: 30px;
  overflow: auto;
}

.container {
  position: relative;
  width: 500px;
  height: 2000px;
  background-color: lightgray;
}

.resize-me {
  position: absolute;
  left: 150px;
  top: 150px;
  width: 50px;
  height: 50px;
  background-color: crimson;
  border: 1px solid black;
}

$(".resize-me").resizable({
  handles: 'n, s',
  containment: 'parent'
});