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.