As the title describes most of the problem. Here is the example code that works as expected in Firefox. Could someone provide a workaround or fix? In action

JavaScript

$(function()
  {
    $('table thead').sortable({
      items: 'th',
      containment: 'document',
      helper: 'clone',
      cursor: 'move',
      placeholder: 'placeHold',
      start: function(e, ui) {
        $overlay=$('<div>').css({ position: 'fixed', left: 0, top: 0, backgroundColor: 'black', opacity: 0.4, width: '100%', height: '100%', zIndex: 500 }).attr('id','sortOverlay').prependTo(document.body);
        $(this).parent().css({ position: 'relative', zIndex: 1000});
      },
      stop: function(e, ui){
        $('#sortOverlay').remove();
        $(this).parent().css({ position: 'static' });
    }
    });
});

CSS

<style type="text/css">
  table {
    background-color: #f3f3f3;
  }
  table thead {
    background-color: #c1c1c1;
  }
  .placeHold {
    background-color: white;
  }
</style>

HTML

<table>
    <thead><th>th1</th><th>th2</th><th>th3</th><th>th4</th></thead>
    <tbody>
      <tr>
        <td>content</td><td>content</td><td>content</td><td>content</td>
      </tr>
    </tbody>
  </table>