Dull Chrome Rounding

Posted: 03/03/11

Taking The Shine Off Google's Chrome

I was working on a web site this week where the client wanted white text on a black background. There's nothing special about that, and the design came together pretty well, except when viewed with the Chrome and Safari browsers.

Both of these webkit based browsers insisted on putting a single pixel gap at the side of the header logo. IE, Firefox and Opera had no such problem, rendering a perfect black logo.

To make matters even stranger, zooming in and out in Chrome saw the gap disappearing and appearing again with each decrease in resolution.

A little Googling lead me to believe that this was a case of the Webkit Percentage Bug, even though I wasn't using percentages. The image I was using was an odd number of pixels wide, and was displayed inside a <div> tag of exactly the same width. Switching to an even number of pixels resolved the problem at a stroke, and as it works just as well in all browsers, that's the way I left it