jquery - 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-container 的鼠标时，看起来 Y 坐标是正确的，只是 X 坐标不正确。如何在 Safari 中解决此问题？

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

Answer 1

我不会详细介绍，因为这里有很好的记录:Position:fixed element within a position:relative parent. Which browser renders correctly?

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

要解决此问题，请使用 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 中，根据 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));

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