Re: [css3] Border radius, clipping and relative positioning

On 07/14/2010 11:25 AM, Rob Crowther wrote:
> 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?

There is nothing in the spec that suggests relpos should break corner
clipping, so this is indeed a bug.

May I add your tests to the W3C's test suite? Instructions for granting
us permission are here:
   http://wiki.csswg.org/test/css2.1/contribute#how-to-license-your-contribution

~fantasai

Received on Thursday, 15 July 2010 08:38:18 UTC