CSS sprites & iOS 4.3 or lower

Question

I'm currently working on a site which needs to be presented well on iOS devices, primarily iPads. Everything works fine apart from anything using a sprite as a background image. The height/width is precise and works in every browser, but with iOS version 4.3.2 and below I get the following:

Here is the CSS for those two elements:

#masthead > a {
  float: left;
  display: block;
  margin: 23px 80px 20px 5px;
  padding: 0;
  width: 235px;
  height: 20px;
  background: url(../../img/sprite.png) 0 0 no-repeat;
}

Here's a screenshot:

And this is the sprite sheet:

score 0 · Answer 1 · answered Dec 05 '11 at 13:58

0

It looks like it could be an overflow issue.

Try adding:

overflow: hidden;

Is there a live URL that we could have a look at?

answered Dec 05 '11 at 13:58

peduarte

1,667
3
16
24

Sorry, I don't have a URL I can show you at the moment. The overflow:hidden; fix didn't work sorry. – Dec 05 '11 at 14:08
`line-height:0; font-size: 0;` ? – peduarte Dec 05 '11 at 14:16

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

Look like image bleeding. You should leave some empty space between the images in your sprite.

See also https://stackoverflow.com/a/646981/567986

edited May 23 '17 at 12:01

Community

1
1

answered Dec 05 '11 at 14:46

Gerben

16,747
6
37
56

That's perfect, thank you very much! I didn't realise there was a problem with zooming on the iPad and stuff. It makes a lot of sense. – Dec 06 '11 at 09:15
You have the same problem in desktop browsers if you zoom. But most people don't zoom on desktop, as opposed to tablets. – Gerben Dec 06 '11 at 12:24

CSS sprites & iOS 4.3 or lower

2 Answers2