jQuery Ui - Resizable - Bug:

Bug for jQuery Ui - Resizing and scrolling the parent container at the same time

by Paul David Rus

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<p>Short description: Resize the red div and at the same time scroll the container. Position of the mouse cursor and the actual handler for the resizable div are not "synchronised".</p>
<p>Expected behaviour: The resize handler should always stay "beneath" or in "sync" with the position of the mouse cursor.</p>

<p>Link to the opened bug: </p>

<p>All versions used were latest at the moment of creating this fiddle:</p>
<ul>
  <li>jQuery - 2.2.1 -
    <a href="https://code.jquery.com/jquery-2.2.1.js">https://code.jquery.com/jquery-2.2.1.js</a>
  </li>
  <li>
    jQuery UI - 1.11.4 -
    <a href="https://code.jquery.com/ui/1.11.4/jquery-ui.js">https://code.jquery.com/ui/1.11.4/jquery-ui.js</a>
  </li>
  <li>
    jQuery UI Theme Black Tie - 1.11.4 -
    <a href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css</a>
  </li>
</ul>

<hr />

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

CSS

.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;
}

JavaScript

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