WebKit Quirk 2¶
286 words on Mac OS X , Web Design
Another distinct WebKit Quirk after the other day's duplicate of the first one. This one has to do with the 'rounded corners' WebKit can draw on boxes. That's a pretty neat feature but it's neither fully standardised nor perfectly implemented yet.
Just look at this little example:
The problem we see here is that WebKit anti-aliases its rounded borders. A nice idea, if it were taking the background into account. However, WebKit prefers to anti-alias the background against colour of the inside of the element in question rather than what's actually visible behind it. To make this clear, perhaps this example with a background image is helpful:
If you look closely, you'll notice that the portion of the background image that would be shown at the corner is displayed there. Resizing the browser window's width while watching the right corners may make this more obvious. I'd say this shouldn't happen.
Amusingly they don't have this problem in Firefox because they decided they'd be happy without anti-aliasing and thus avoided this opportunity for sloppy implementation.
Another thing that's rather unsatisfying about rounded corners is the way they are handled by img elements: A rounded corner is drawn but it is drawn beneath the image. So instead of cropping the image in a nice and round way, it gives something ugly. This is so obvious that I'd guess it's deliberate. But I wonder what the rationale behind it could be.
Mozilla (as of Firefox 2) actually outdoes WebKit in this respect as it doesn't only not crop img elements but also lets an element's background image 'underlap' beyond the rounded corners – and occasionally even outside the border!
Look at these issues on a separate page.