Safariマウスの左位置（x座標）が正しく表示されない

Question

Butterfly Builderアプリのthis pageのカスタムカーソルを使用して、カラーパレットセクションで色を適用すると、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座標を読み込んでいません。 X座標ではなく、Butterfly Builderで.canvas-containerのマウスを動かすときに、Y座標が正しいかのように見えます。 Safariでこれを修正するには？

私の言うことを知りたい場合は、http://memorial.gardenにアクセスし、ページの右下にある「Launch Butterfly Builder」ボタンをクリックしてください。手順2に進み、カラーパレットを選択すると、pBrush要素の問題が表示されます。なぜこれが起きているのか分かりません。

Answer 1

、それは非常によく、ここで文書化されているので、私は、詳細には触れません。Position:fixed element within a position:relative parent. Which browser renders correctly?

は基本的に、問題は、ブラウザが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のためのハック回避策場合が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の中点が実際のカーソルの位置と同じであることを確認してください。次に、次のことについて考えることができます。