Mac/Safari overflow bug??

[John Woram]

Anyone know a workaround for the following??

I open a small window to display an image exactly the size of the window. With an html{overflow:auto;} style, there are no scrollbars unless the user reduces the size of the window. This works fine in IE and Firefox on a PC, and in Firefox on a Mac. In Mac/Safari, scrollbars appear. Workaround: Use CSS to make the image height 1 pixel less than the window size. Now the scrollbars disappear until the user reduces the size of the window. Here's an example of what I mean:

http://www.galapagos.to/temp/test.htm

The Test 1 link displays the scrollbars in Mac/Safari, but works fine elsewhere. The Test 2 link is my clunky workaround. I'm wondering if anyone knows a better way?

[ktinkel]

Originally Posted by John Woram

I open a small window to display an image exactly the size of the window. With an html{overflow:auto;} style, there are no scrollbars unless the user reduces the size of the window. This works fine in IE and Firefox on a PC, and in Firefox on a Mac. In Mac/Safari, scrollbars appear.

I don’t know one, but thought I should tell you that I got scrollbars in both images with Mac Firefox 1.5.01 but only with the first in Safari 2.0.3.

It was really weird in Opera 8.0.2 — the images were both about 10 pixels tall and both had horizontal scrollbars.

[John Woram]

Originally Posted by ktinkel

I got scrollbars in both images with Mac Firefox 1.5.01 but only with the first in Safari 2.0.3.

Hmmm, that's odd -- I was using Mac Firefox 1.0.6, but after reading your message I upgraded to 1.5.0.1 (while keeping my fingers crossed ). But as before, I don't see the scrollbars in either test. IOW, both versions of Firefox work fine here, and it's only Mac/Safari -- 2.0.3(417.8) -- that has the scrollbar problem.

[ktinkel]

Originally Posted by John Woram

But as before, I don't see the scrollbars in either test. IOW, both versions of Firefox work fine here, and it's only Mac/Safari -- 2.0.3(417.8) -- that has the scrollbar problem.

Don’t know what to say. Interesting to see what others experience.

Truly puzzling. (And the Opera thing is bizarre!)

[iamback]

Originally Posted by John Woram

Anyone know a workaround for the following??
(...)
http://www.galapagos.to/temp/test.htm

The Test 1 link displays the scrollbars in Mac/Safari, but works fine elsewhere. The Test 2 link is my clunky workaround. I'm wondering if anyone knows a better way?

I see the following stylesheet (second test):

<style type="text/css">
html {overflow:auto;}
body {margin:0;}
img {position:absolute; width:700px; height:499px;}
</style>

I always preach: be specific in your CSS! Especially if you need pixel-perfect positioning. What you have done here is set a margin on the body - but not padding. There are browsers (though I don't know if Safari is one of them, but Opera certainly is!) that actually have a non-zero padding on the body - if you don't override that, you'll get that padding, not zero. So, at least add padding: 0; to the body style. (I usually set both on html as well, just make sure I start with known quantities.) You also don't have any padding or margin set for the div that's surrounding the image - just to be sure, set those to 0 as well.

[John Woram]

Originally Posted by iamback

I always preach: be specific in your CSS!

Right! And I am, always (well, almost always ). The code I posted was stripped down to a bare minimum, for the purposes of (?) clarity. And in this specific example, the padding:0; had no effect one way or the other. In fact, so far the only way I can get rid of the Safari scrollbars is if the window height is one pixel (or more) greater than the image height. That, or force the scrollbars to be hidden, which I don't want to do.

[dthomsen8]

Originally Posted by John Woram

Anyone know a workaround...??I

Yesterday, I bought a book by Joseph W. Lowery, CSS Hacks and Filters, Making Cascading Style Sheets Work, Wiley, 2005, which contains many workarounds (he calls them "hacks") for many circumstances. There are a good many bugs described, many of them with IE 5.5 and 6x.

The chapter on debugging CSS problems is especially interesting. I thought I would mention this book, since it fits right in with your problem.

[John Woram]

Thanks for the reference to the Lowery book -- I'll go have a look to see if he says anything about Mac/Safari bugs too.