CSS/javascript hover does not display correctly in chrome

Question

I am building a site that has an image map menu with a popup box that is supposed to pop at the mouse when the mouse is hovering over a particular area. It works great in firefox and IE but when I load the page in chrome the boxes appear as if the page were not scrolled. it works fine if the page is scrolled all the way to the top, but as soon as the user scrolls down, the boxes are to high on the page.

I am using a script i got from http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip www(dot)dramanotebook(dot)com/menu/ (i can only put one hyperlink in)

Thanks in advance for Your help

Answer 1

Thats a bug in this script that also shows up on the example page. Maybe its enough to delete this line:

if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 

Answer 2

I was about to ask 'have you tried this in Safari?', since Chrome and Safari both use the webkit engine.

Take a look at the .js file.

function showToolTip(e,text){
/* blah blah*/
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /**** THIS  ****/
var leftPos = e.clientX - 100;
/*etc.*/
}   

It has a fix applied specifically to Safari, using the userAgent string. Chrome sends 'Safari' in the user agent string, too, so it will apply that to Chrome also. This is generally considered a poor practice. In general, I'd say the scripts from dhtmlgoodies are very outdated. Is this fix still needed for newer webkit renderers? Who knows. You might try commenting it out and seeing if that fixes it.