[css3] Border radius, clipping and relative positioning

Hi All

If overflow: hidden is set on an element with border-radius applied, any 
contained content should also be clipped by the border radius (according 
to http://www.w3.org/TR/css3-background/#corner-clipping).  I know this 
currently doesn't happen in Firefox, but it works in WebKit.

However a question came up on StackOverflow a few minutes ago where the 
poster was finding it not working in WebKit.  After a bit of mucking 
around we realized it was because the elements had position: relative; set.

I've uploaded an example page: 
http://www.boogdesign.com/examples/clipping.html

0: The initial example, position: relative set on both, no clipping.

1: Position removed from both, clips correctly in Chrome 6.

2 & 3: Position removed from parent and child respectively, no clipping.

4: Child element offset, the straight sides are clipped correctly but 
the bottom right corner isn't.

My question is: should relative position break corner clipping, or is 
this a bug?

Rob

Received on Wednesday, 14 July 2010 18:25:43 UTC