Jquery Safari鼠标左移位置（x坐标）不正确

但是，当通过调色板部分应用颜色时，Safari在上的Butterfly Builder应用程序中使用自定义光标时，鼠标在

上移动时，Safari没有将光标对齐。画布容器

尝试了这两种方法以对齐光标，但始终无法工作：

var pBucketHTML = $('<div id="pBrush"><span class="color"></span></div>');
pBucketHTML.css('top', ((e.offsetY + $(this).offset().top) - (pBucketHTML.height() / 2)));
pBucketHTML.css('left', ((e.offsetX + $(this).offset().left) - (pBucketHTML.width() * 2)));

这在Chrome和所有其他浏览器上都能很好地加载鼠标光标，但是Safari没有用正确的X坐标加载鼠标光标。。。不知道为什么？在Butterfly builder中移动.canvas容器的鼠标时，看起来Y坐标是正确的，而不是X坐标。如何在Safari中修复此问题

要了解我的意思，请访问：并单击页面右下角的“启动Butterfly Builder”按钮。进入步骤2并选择调色板后，您将看到

pBrush

元素的问题。我不知道为什么x坐标会这样偏离

---

我将不详细介绍，因为这里有很好的文档记录：

基本上，问题在于浏览器处理

位置的方式：固定元素

要解决此问题，请使用
position:relative在你的
#pBrush
中更少

#pBrush {
    width: 24px;
    height: 34px;
    background: transparent url('../images/paintBrush.png') left bottom no-repeat;
    position: relative;

    .color {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #FFFFFF;
        display: inline-block;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
}

在JavaScript中，根据画布的偏移量进行补偿

pBucketHTML.css('left', e.pageX - $("#canvasBuilder").offset().left - (pBucketHTML.width() / 2));

你可能需要稍微调整一下，但我相信这就是你想要的


编辑：如果可以接受Safari 8的黑客操作，可根据以下内容改编：

然后在JavaScript中，您可以执行以下操作：

pBucketHTML.css('left', e.pageX - returnSafariOffset() - (pBucketHTML.width() / 2));

因为你似乎没有得到和我一样的结果，你可能不得不尝试某种形式的这种方法来得到你想要的东西。如果您有问题，请告诉我。
您应该首先检查自定义指针的JS计算：

蓝点是一个真正的光标位置，红块是你的#pBrush。只要确保#pBrush中点与实际光标的位置相同即可。然后我们可以考虑下一步是什么。
这很奇怪，我在Safari中测试过，效果非常好。您正在运行哪个版本的Safari？在Mac Yosemite上使用Safari-版本8.0（10600.1.25.1），如果有帮助的话。可以确认它在El Capitan上的Safari版本10.1.2（11603.3.8）中正常工作。谢谢，我认为问题是因为旧的Safari浏览器。但在约塞米蒂看不到升级Safari的选项。可能需要首先升级整个操作系统。当您使用
getBoundingClientRect（）
而不是
offsetXXX
（或者jQuery的
.offset（）
相同）时，是否会发生同样的情况？不幸的是，这并不能解决Safari中的问题，并且在所有其他浏览器中应用这也会导致问题，现在偏移量与我在Safari上展示的图片相同，这是所有其他浏览器的问题。顺便说一句，我已经在localhost上对此进行了测试。这就是为什么您需要添加
$（“#canvasBuilder”）.offset（）。left
，所以需要添加它？因为在你的例子中，你是在减去它。我试过你的例子，它在所有浏览器中都会导致问题。对不起。是的，像这个例子一样减去。如果在Chrome控制台中执行
console.log（$（“#canvasBuilder”）.offset（）.left）
，它会输出什么？如果将其替换为一个固定的数字（仅用于测试目的），如
pBucketHTML.css（'left'，e.pageX-400-（pBucketHTML.width（）/2））基本上，我们已经完成了一半。一旦所有浏览器都以相同的方式响应，我们只需纠正所有浏览器中的相同问题：在本例中，从
pageX
中减去一定量。该距离应该是画布（在您的实时站点上id为
canvasBuilder
）与页面左侧的距离。我已经4天没有互联网了，我会回复任何评论。我最初想要这个偏移量，因为点击pBrush不会在画布上点击它，因此不会在画布上提供点击事件，也许我应该在pBrush元素上设置
指针事件：none
。但我记得这导致了另一个问题，所以这就是为什么我没有准确地这样做，而实际的鼠标需要刚好在pBrush元素之外。
pBucketHTML.css('left', e.pageX - $("#canvasBuilder").offset().left - (pBucketHTML.width() / 2));

function returnSafariOffset() {
  var nAgt = navigator.userAgent;

  // We have Safari
  if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
    fullVersion = nAgt.substring(verOffset+7);
    if ((verOffset=nAgt.indexOf("Version"))!=-1) {
      fullVersion = nAgt.substring(verOffset+8);
    }

    majorVersion = parseInt(''+fullVersion,10);
    if (isNaN(majorVersion)) {
      fullVersion  = ''+parseFloat(navigator.appVersion); 
      majorVersion = parseInt(navigator.appVersion,10);
    }

    if (majorVersion == 8) {
      // Return a custom amount for Safari 8:
      return $("#canvasBuilder").offset().left;
    }
  }
  // Return an amount for all other browsers:
  return 0;
}

pBucketHTML.css('left', e.pageX - returnSafariOffset() - (pBucketHTML.width() / 2));