ccd08d555773febb9d221bb3be960651503de0d0
hiram
  Wed Nov 4 22:48:16 2020 -0800
now working correctly on Firefox, Chrome, Safari and Edge refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 59fcad5..0436c2a 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4532,91 +4532,80 @@
          mouseOver.popUpTimer = null;
       }
       mouseOver.delayDone = true;
       mouseOver.delayInProgress = false;
     },
 
     popUpVisible: function () {
       if (! mouseOver.visible) {        // should *NOT* have to keep track !*!
         mouseOver.visible = true;
         $('#mouseOverText').css('display','block');
         $('#mouseOverVerticalLine').css('display','block');
       }
     },
 
     //  the evt.currentTarget.id is the td_data_<trackName> element of
-    //     the track graphic
+    //     the track graphic.  There doesn't seem to be a evt.target.id ?
     mouseInTrackImage: function (evt)
     {
     // the center label also events here, can't use that
     //  plus there is a one pixel line under the center label that has no
     //   id name at all, so verify we are getting the event from the correct
     //   element.
     if (! evt.currentTarget.id.includes("td_data_")) { return; }
     var trackName = evt.currentTarget.id.replace("td_data_", "");
     if (trackName.length < 1) { return; }	// verify valid trackName
 
-    var evtX = Math.floor(evt.pageX);      // location of mouse relative to the whole page
-    var evtY = Math.floor(evt.pageY);      // even when the top of page has scolled off
-    var offX = Math.floor(evt.offsetX);
+    // location of mouse relative to the whole page
+    //     even when the top of page has scolled off
+    var evtX = Math.floor(evt.pageX);
+//  var evtY = Math.floor(evt.pageY);
+//  var offX = Math.floor(evt.offsetX);       // no need for evtY or offX
 
     // find location of this <td> slice in the image, this is the track
     //   image in the graphic, including left margin and center label
     //   This location follows the window scrolling, could go negative
     var tdId  = document.getElementById(evt.currentTarget.id);
     var tdRect = tdId.getBoundingClientRect();
     var tdLeft = Math.floor(tdRect.left);
     var tdTop = Math.floor(tdRect.top);
     var tdHeight = Math.floor(tdRect.height);
     var clientX = Math.floor(evt.clientX);
-    var clientY = Math.floor(evt.clientY);
     // the graphOffset is the index (x coordinate) into the 'spans' definitions
-    //  of the data value boxes for the graph.  Seems to always be off by 3,
-    //  don't know why that is.
+    //  of the data value boxes for the graph.  The magic number three
+    //   is used elsewhere in this code, note the comment on the constant
+    //   LEFTADD.
     var graphOffset = Math.max(0, clientX - tdLeft - 3);
 
-    // find the location of the image itself, this could be the single complete
-    //  graphic image of all the tracks, or possibly the single image of the
-    //  track itself.  This location also follows the window scrolling and can
-    //  even go negative when the web browser scrolls a window that is larger
-    //  than the width of the web browser.
-    var imgName = "img_data_" + trackName;
-    var imgId = document.getElementById(imgName);
-    var imgRect = imgId.getBoundingClientRect();
-    var imgLeft = Math.floor(imgRect.left);
-//    var imgTop = Math.floor(imgRect.top);
-//    var imgWidth = Math.floor(imgRect.width);
-//    var imgHeight = Math.floor(imgRect.height);
-//    var imgRectX = Math.floor(imgRect.x);
     var windowUp = false;     // see if window is supposed to become visible
     var foundIdx = -1;
     if (mouseOver.spans[trackName]) {
        foundIdx = mouseOver.findRange(graphOffset, mouseOver.spans[trackName]);
     }
     // can show 'no data' when not found
     var mouseOverValue = "no data";
     if (foundIdx > -1) { // value to display
       mouseOverValue = "&nbsp;" + mouseOver.spans[trackName][foundIdx].v + "&nbsp;";
     }
     $('#mouseOverText').html(mouseOverValue);
     var msgWidth = Math.ceil($('#mouseOverText').width());
     var msgHeight = Math.ceil($('#mouseOverText').height());
-    var posLeft = imgLeft + offX - msgWidth + "px";
+    var posLeft = clientX - msgWidth + "px";
     var posTop = tdTop + "px";
     $('#mouseOverText').css('left',posLeft);
     $('#mouseOverText').css('top',posTop);
-    $('#mouseOverVerticalLine').css('left',imgLeft + offX + "px");
+    $('#mouseOverVerticalLine').css('left',clientX + "px");
     $('#mouseOverVerticalLine').css('top',posTop);
     $('#mouseOverVerticalLine').css('height',tdHeight + "px");
     windowUp = true;      // yes, window is to become visible
 
     if (windowUp) {     // the window should become visible
       mouseOver.popUpVisible();
     } else {    // the window should disappear
       mouseOver.popUpDisappear();
     } //      window visible/not visible
     },  //      mouseInTrackImage function (evt)
 
     // timeout calls here upon completion
     delayCompleted: function()
     {
        mouseOver.delayDone = true;