Safari鼠标移动左侧位置(x坐标)不正确

Question

在本页的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));

我用的很少:

#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并单击页面右下角的"启动Butterfly Builder"按钮.进入第2步并选择调色板后,您将看到pBrush元素的问题.不确定为什么会发生x坐标这样的情况.

Answer 1

我不会详细介绍，因为这里有很好的文档记录：Position:fixed element inside aposition:relativeparent。哪个浏览器可以正确渲染？

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

要解决此问题，请position: relative;在 LESS 中使用#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 解决方法是可以接受的，改编自如何使用 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));

由于您似乎没有得到与我相同的结果，因此您可能必须尝试某种形式才能得到您想要的结果。如果您有疑问，请告诉我。