W3C home > Mailing lists > Public > www-style@w3.org > July 2010

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

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 15 Jul 2010 01:37:33 -0700
Message-ID: <4C3EC8CD.8080203@inkedblade.net>
To: Rob Crowther <robertc@boogdesign.com>
CC: www-style@w3.org
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:

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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:48 UTC