title: Div position slightly offset when using jquery draggable with HTML local storage
body: <p>I have a draggable div element that uses HTML 5 localStorage to remember its position on the users page. This works fine.</p>
  
  <p>I'm also using the <code>window.addEventListener</code> to update the position if the div was dragged in another open tab. This works but the div's position in one browser tab is slightly offset to the div in the another tab. Does anyone know what is causing this?</p>
  
  <p>A basic example is below. Save it as an html file and open it up in two different tabs to see what is happening.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
  
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
      .note
      {
          position: absolute;
          width:200px;
          height:220px;
          background: #2E2E2E;
          top: 50px;
          left: 50px;
  
       transform:rotate(7deg);
      -ms-transform:rotate(7deg);
      -moz-transform:rotate(7deg);
      -webkit-transform:rotate(7deg);
      -o-transform:rotate(7deg);
      }
  
  
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function () {
  
  
              var note = $(".note");
              updatePosition(note);
  
              note.draggable({ stop: function () {
  
                  var left = $(this).position().left;
                  var top = $(this).position().top;
  
                  localStorage.setItem("left", left);
                  localStorage.setItem("top", top);
  
              }
              });
  
              window.addEventListener("storage", function (e) {
                  updatePosition(note);
              }, 
  
              false);
  
  
          });
  
              function updatePosition(note) {
  
              var left = localStorage.getItem("left");
              var top = localStorage.getItem("top");
              note.css({ left: left + "px", top: top + "px" });
  
              }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="note"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE: Its the CSS transformation properties that are causing the offset. </p>