Safari scrolling div select bug

This is one of the strangest cross-browser things I’ve come across, including IE bugs…

Picture this:
-A div that is hidden until moused over (abs position, z-index > 1)
-Onmouseout, it hides itself
-When it is displayed, it has an overflow:scroll

In Safari, when you would scroll and try to click any of the items in the list, it would scroll back to the beginning!

The fix is to make the div visibility:hidden, not display:none. So, since this would leave the scrollbar with no div in IE/FF, I did this in PHP:

if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']),strtolower(”Safari”))) {
$visibility = “visibility:hidden”;
} else {
$visibility = “display:none”;
}

Then just printed out the var in the JavaScript.

Leave a Reply