Moving cursor in safari to the left (x coordinate) is incorrect

Question

Using the custom cursor in the Butterfly Builder application on this page , however, if you apply colors through the color palette section, Safari does not have the cursor where the mouse moves over .canvas-container tried both of them to align this, but it never works:

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

and

 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 I use for this:

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

This loads the mouse cursor perfectly in Chrome and in all other browsers, but Safari doesn't load it with the correct X coordinate ... not sure why? It looks like the Y coordinate is correct when moving the mouse .canvas container in the Butterfly builder, and not in the X coordinate. How to fix this in Safari?

To find out what I mean, go to http://memorial.garden and click on the "Launch Butterfly Builder" button at the bottom right of the page. As soon as you go to step 2 and select a color palette, you will see a problem with the pBrush element. Not sure why this happens when the x coordinate is disabled.

Answer 1

I will not go into details because it is very well documented here: Position: fixed element in position: relative parent. Which browser displays correctly?

The main problem is how browsers handle position:fixed; elements position:fixed; .

To solve this problem, use position: relative; in #pBrush LESS.

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

And in your JavaScript, adjust based on the offset of your canvas

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

You may need to adjust this a bit, but I believe that this is what you are looking for.

---

Edit: In case the hacking work for Safari 8 is acceptable, adapted from How to determine 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; } 

Then in your JavaScript you can do something like this:

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

Since you do not seem to get the same results as me, you may have to experiment with one form or another to get exactly what you are looking for. Let me know if you have any questions.

Answer 2

First you should check your JS calculation of your custom pointer:

The blue dot is the actual cursor position, the red block is your #pBrush. Just make sure that the middle point of #pBrush matches your actual cursor position. Then we can think of the following.