horizontal scrolling div not working in Safari

Question

Hi I made this site a while ago in my table days but have just realised the horizontal scrolling dive doesn't work in Safari.

#galleryscroller {
    overflow-x:scroll ;
    overflow-y:hidden;
    overflow:-moz-scrollbars-horizontal !important;
    height:138px; 
    width:360px;
}

<div id="galleryscroller">
<table width="100%"  border="0" cellspacing="0" cellpadding="6">
<tr align="left" valign="middle">
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="76" height="100" border="0" /></a></td>
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="100" height="67" border="0" /></a></td>
</tr>
</table>
</div>

The site is here - www.tobymurphy.com

Can anyone help?, so far no answers on Google have worked...

Solution 1

There's a quirk with the WebKit engine with scrolling when you need to hide one of the scrollbars. Try the following:

#galleryscroller {
  overflow: none;
  overflow-x: auto;
  display: block;
  height: 138px;
  width: 360px;
}

Note the first reset to make overflow to none.

Solution 2

Add a white-space: nowrap; to #galleryscroller style. this should fix it, if it doesn't work, try making the position absolute.

Solution 3

I myself discovered this "won't scroll DIV" problem recently. The problem exists in Safari 6 (WebKit), but there is no problem in Chrome (also WebKit). So one cannot contend it is a "WebKit problem."

In my case, the vertical scroll bar displays in Safari 6, but it is frozen. However, if you grab the text inside the table (which is inside the DIV) and then drag that text up and down, it will scroll.

I also can confirm that adding the following style to the DIV does NOT solve the problem:

white-space: nowrap;

You can see the problem on my site here (as of March 1, 2013 anyway): http://visionsecurity.jp/jp/buy.html

It's in Japanese, but you can still see the problem. Just click the rightmost yellow square on the Japan map that is one below the first yellow square at the far right.

But the "Fundamental Answer" to the original question is this: there is no answer/solution we can effect because this DIV scrolling problem appears to be a BUG IN SAFARI. I have spoken some web programmer associates who have told me so. So in this case, the final "solution" to the problem would appear to come exclusively from Apple. The only thing we web designers and programmers can do is simply prod Apple to accelerate the pace at fixing the bug in their browser:

http://www.apple.com/feedback/safari.html

Solution 4

I know this is old, but I recently ran into this issue, and thought that it's worth mentioning that this could be also caused by the lack of z-index. In my case I had to specifically set the z-index for the div that I wanted to scroll, and it was only occuring in Safari.

View more solutions