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

我很少用这个：

#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并点击＆＃34;启动Butterfly Builder＆＃34;页面右下角的按钮。进入第2步并选择调色板后，您将看到pBrush元素的问题。不知道为什么会发生这种情况，x坐标就像那样。

Answer 1

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

基本上，问题在于浏览器处理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解决方案，则可以从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坐标）不正确

2 个答案: