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

Question

在 this page 上的 Butterfly Builder 应用程序中使用自定义光标，但是，当通过调色板部分应用颜色时，Safari 没有将光标对准鼠标在 .canvas-container 已经尝试了这两种方法来排列它，但它永远行不通：

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

和

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

LESS 我正在为此使用：

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

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

这可以在 Chrome 和所有其他浏览器上完美地加载鼠标光标，但 Safari 无法使用正确的 X 坐标加载它...不知道为什么？在 Butterfly 构建器中移动 .canvas-容器的鼠标时，看起来 Y 坐标是正确的，只是 X 坐标不正确。如何在 Safari 中解决此问题？

要了解我的意思，请访问：http://memorial.garden 并单击页面右下角的 "Launch Butterfly Builder" 按钮。进入第 2 步并选择调色板后，您将看到 pBrush 元素的问题。不知道为什么 x 坐标会这样关闭。

Answer 1

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

基本上，问题在于浏览器处理 position:fixed; 元素的方式。

要解决此问题，请在 #pBrush LESS 中使用 position: relative;。

#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 中，根据您的 canvas

的偏移量进行补偿

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

您可能需要稍微调整一下，但我相信这就是您要找的。

编辑： 如果 Safari 8 的 hacky work-around 是可以接受的，改编自 How to detect my browser version and operating system using JavaScript?:

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;
}

然后在你的 JavaScript 中，你可以这样做：

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

由于您似乎没有得到与我相同的结果，您可能需要尝试某种形式的此方法才能准确获得您正在寻找的结果。如果您有任何问题，请告诉我。

Answer 2

你应该先检查你自定义指针的JS计算：

蓝点是真正的光标位置，红块是你的#pBrush。只需确保#pBrush 中间点与您的真实光标位置相同。然后我们可以考虑下一步。

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

Safari mouse move left position (x coordinate) not correct

css

safari

jquery

mousehover