sortable target ends up outside the table.thead.tr webkit bug jqueryui 1.8.12

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>5</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

CSS

th, td {
    width: 50px;
    border: 1px solid #000;
}

JavaScript

(function($) {
    $('table tr').sortable({
        'axis': 'x'
    })
}($))