JQueryUI droppable hover class bug on scaled terget.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
</table>

CSS

div {
  display:inline-block;
  padding:3px;
  border:1px solid rgba(200,0,0,.6);
}
table {
  transform:scale(0.5);
  border:1px solid gray;
  padding:0;
  border-collapse: collapse;
}
td {
  padding:5px;
  background: rgba(0,0,150,0.3);
}
tr.highlight td {
  background: rgba(150,0,0,0.8);
}

JavaScript

$('div').draggable();
$('tr').droppable({hoverClass:"highlight"});