CSS Images, Sprites, and iPhone WebKit

A few months ago, I was helping a friend troubleshoot an odd iPhone-related visual error on Hunch. The right side of the buttons weren’t lining up vertically with the top or bottom of the rest of the button. Oddly, the problem only manifested itself when viewing the site at certain zoom levels (non-quantized, to be specific). Pinching in/out or zooming into specific parts of the page made the buttons render correctly.

We’d used a similar technique on Domainr, so were curious to see if there was a way to address it cleanly.

It appeared that WebKit for iPhone uses mipmaps to render minimized background images. This makes sense—it has fast texturemapping hardware, and OS X / Quartz has been using OpenGL to render 2D graphics for some time.

The combination of hardware texture filtering of mipmapped background images with (then) imprecise texture coordinates were causing the artifacts we’d been seeing (recent related changes in WebKit).

Domainr’s buttons are styled using a sliding-door technique with a single CSS sprite background image. By this time we were starting to test against Safari 4.0 and Firefox 3.5, which also demonstrated similar visual errors when using their full-page zoom features.

The solution ended up being simple:

Vertically align the left and right background images for the button in the sprite.

It’s a palliative fix, but works. We were able to keep the single sprite image, and not introduce iPhone-specific CSS or hack WebKit. In the end, there were other benefits to the fix. Despite redundant image data, aligning the background slices eased the process of updating the sprite image for new button variations.

Comments

January 14
2:27 AM
Edit

iphone applications development writes:

There may be issues regarding the use of CSS Sprites in Mobile Web as a “Worst Practice” but just like the article above WebKit- and Opera-based browsers will handle sprites just fine. Its better to deliver a set of images once, paying a relatively small penalty for extra (cached, with long expiration) HTTP transactions, than to pay a layout engine penalty on every subsequent page rendering.

July 8
9:56 AM
Edit

Aaron writes:

I've tried the fix you describe to no avail. Am I right to assume that you are doing something like this where each element has a background image (sprite) applied to it.?

#button, #button span { vertical-align: top; }

December 5
7:13 PM
Edit

Akash writes:

Hey,

I have a sliding image box in my website. When the pictures in it were individual images, it was working fine on the iPhone Safari. Now, I combined the images using Sprites. It appears broken on Safari. Any idea how I can fix that?

Thanks.
Akash

December 5
8:31 PM
Edit

Randy Reddig writes:

Hi Akash,

Can you define “broken?”