iPod Touch Safari vs Mac/PC bug?

HTML & CSS
1

Here is the site in question: http://nupper.heliohost.org

I’m having some troubles getting rid of some phantom white spaces only appear on the iPod Touch’s Safari browser.

The odd thing is, as you zoom in on the iPod, the white space either changes or simply disappears (appearing as it should).

I’ve viewed the site on my Mac with Firefox, Chrome, Safari and Opera and also the same browsers on my Windows (along with IE 8). All of them appear just fine in regards to these phantom gaps.

I tried implementing negative margins to close the gaps, but I ditched it in case there was something I was missing

Here are the screen shots from my iPod Touch:

From my quick search I think this may be related to this thread.

Any ideas?

Thanks :smiley:

2

Thanks for the idea! :smiley:

3

Hi,

If you are talking about the little white lines between your background images then it does look like a rounding error. I don’t have an ipod touch to test but you could try things like setting overflow:hidden, font-size:0 and line-height:0 on the graphical elements like your bottombar style (and similar).

I guess your idea of overlapping the elements by 1px might work also but you’d have to try it out on one element first just to be sure.

Alternatively use border-radius (-webkit-border-radius,-moz-border-radius) for those round corners and use images for IE only and see what happens.

Sorry but I don’t have any of these new fangled devices :slight_smile: I don’t even own a mobile phone:(