Multiple background images and iPhone

HTML & CSS
1

I found a weird bug: when you have several background images on top of each other, iPhone’s Safari doesn’t clip them properly, so edges of background images under top image are shown. Anyone knows how to fix it?

Here is what I’m talking about: a simple slider test case.

This is how it looks like in normal browsers:

and this is how it looks like on iPhone:


As you can see, edges of bottom background are visible, even though they should be covered by middle background. When I zoom in, different edges start appearing, like this (on first slider bottom border bug disappeared, on second slider top border appeared):

Anyone knows how to fix this?

2

Hi, we don’t get many iphone questions, and debugging it is impossible unless you have an actual iphone (there might be an emulator though)

Unless this design detail must happen then I’d recommend just leaving it be. Mobile devices in general are a pain in the rear end :slight_smile:

3

I was hoping someone had experienced such problem. I’ve googled all possible keywords related to this question, no useful results.

As for emulators, don’t ever use them. I have used emulators until I got the real thing, they are all 100% wrong and useless. All they do is reduce browser’s window to mobile device window, but that’s not how real browser works at all. Real iPhone Safari scales down page, default visible width is 960 pixels, not 320, unless designer specifies viewport in html head. Also fonts behave differently because browser tries to make font easier to read so it scales it up, which emulators can’t emulate. Better not to adjust page at all than to use one of those “emulators”.

Unfortunately it must happen. Its not a major bug though, only a small graphical error, so I can live with it.

4

If you have a mac you can use the developer sdk package which has an iphone emulator that is more or less exact and I have it running on my mac.

It shows the problems in the multiple backgrounds on your example and it seems to be a rounding error where the iphone is scaling the image. If you scale back to full size it seems to render correctly

I’ve tried a few things but nothing seems to make a difference so I guess it’s a rounding bug in the software.

5

As Paul has mentioned, if you own a Mac, Apple have an official iPhone emulator which accurately DOES emulate the device itself (it uses the same code). What I will say is in your example, perhaps it may be worth increasing the whitespace around the sections of the sprite (it may be an issue of incorrect padding calculations). :slight_smile:

6

Thank you for suggestions, but nothing seem to work. Padding is 0, all 3 images are assigned to same <div> using multiple backgrounds CSS3 that Safari supports, setting margin to 0 doesn’t change anything ether.

Thank you for SDK link, didn’t know there is a reliable emulator.

I’ve reported this to Apple using their online bug reporter thingie, hopefully it will be fixed.

7

Yes I think the problem is the iphone scaling factor mechanism because at full size there is no problem so it needs fixing at source.

I tried quite a few variations but all had the same effect. However in this game you never know if there is another answer just waitng around the corner :slight_smile: