jquery - Safari mouse move left position (x coordinate) not correct -

using custom cursor in butterfly builder app on this page, when applying colors via color palette section, however, safari not lining cursor mouse moving on .canvas-container have tried both of these in order line up, 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'm using 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 loading mouse cursor fine on chrome , other browsers, safari not loading correct x coordinate... not sure why? looks y coordinate correct when moving mouse of .canvas-container in butterfly builder, not x coordinate. how fix in safari?

to see mean, please visit: http://memorial.garden , click on "launch butterfly builder" button on bottom right hand side of page. once step 2, , choose color palette, see problem pbrush element. not sure why happening x coordinate being off that.

i won't go details, because documented here: position:fixed element within position:relative parent. browser renders correctly?

basically, problem way browsers treat position:fixed; elements.

to solve issue, 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 javascript, compensate based on offset of canvas

pbuckethtml.css('left', e.pagex - $("#canvasbuilder").offset().left - (pbuckethtml.width() / 2)); 

you may have tweak slightly, believe looking for.

---

edit: in case hacky work-around safari 8 acceptable, adapted how detect browser version , operating system using javascript?:

function returnsafarioffset() {   var nagt = navigator.useragent;    // 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 custom amount safari 8:       return $("#canvasbuilder").offset().left;     }   }   // return amount other browsers:   return 0; } 

then in javascript, can this:

pbuckethtml.css('left', e.pagex - returnsafarioffset() - (pbuckethtml.width() / 2)); 

since don't seem getting same results me, may have experiment form of looking for. let me know if have questions.

wiki