title: jQuery UI Draggable + CSS Transform Causes "Jumping"
body: <p><strong>EDIT:</strong> I solved it. But StackOverflow isn't letting me mark my answer as the solution, so I simply am not going to.</p>
  
  <p>I'm having an issue with regard to using Draggable with a CSS transformed parent. Basically, I need to use absolute positioning to spawn a Draggable div directly underneath the cursor. When absolute positioning is used with CSS transforms, the draggable element does a bit of jumping right as the dragging takes place. After the jump takes place, behavior proceeds as expected. The jump does not occur if no transformations are applied to the draggable or the parent div.</p>
  
  <p>Here's a fiddle that shows exactly what the problem is:
  <a href="http://jsfiddle.net/qBubN/7/" rel="nofollow noreferrer">http://jsfiddle.net/qBubN/7/</a></p>
  
  <pre><code>body {
       background-color: blue;   
  }
  
  #draggable {
      position: absolute;
      left: 50px;
      top: 50px;
      background-color: rgba(0,0,0,0.5);
      border: 1px solid black;
      width: 350px;
      height: 350px;
      color: white;
      -moz-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      transform: scale(0.5);}
  
       $("#draggable").draggable({
              scroll: true, 
              distance: 5,
              grid : [ 10, 10 ],
              start: function (event, ui) {
              }
          });
  
  &lt;html&gt;
      &lt;body&gt;
         &lt;div id="draggable"&gt;
             Hello!
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Already tried applying this patch, to no avail. There's a (good) chance this fix is too old to work. There's also a chance I am applying the patch wrongly. <a href="https://stackoverflow.com/questions/3523747/webkit-and-jquery-draggable-jumping">Webkit and jQuery draggable jumping</a></p>