html div向上偏移了,使用带有HTML本地存储的jquery draggable时，Div位置稍微偏移

我有一个可拖动的div元素，它使用HTML 5 localStorage来记住它在用户页面上的位置。这工作正常。

如果div在另一个打开的选项卡中被拖动，我还使用window.addEventListener来更新位置。这可以工作，但div在一个浏览器选项卡中的位置稍微偏移到另一个选项卡中的div。有谁知道这是什么原因造成的？

一个基本的例子如下。将它保存为html文件，并在两个不同的选项卡中打开它以查看发生了什么。

Untitled Page

.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);

}

$(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" });

}

更新：它导致偏移量的CSS转换属性。