Re: [css3-background] 'border-radius' and 'overflow'

L. David Baron wrote:
> http://dev.w3.org/csswg/css3-background/#the-border-radius says:
>   # Backgrounds, but not the border-image, are clipped to the
>   # appropriate curve (as determined by ‘background-clip’). Other
>   # effects that clip to the border or padding edge (such as
>   # ‘overflow’) also must clip to the curve. 
> 
> What does it mean for 'overflow: scroll' or 'overflow: auto' to clip
> to the curve?

What that sentence means is that if 'overflow' is set to hide
overflowing content, then the UA must clip to the curve, not
to the logical box. I'll change that to say 'overflow' != 'visible'
to be clear.

> I have no idea how that's supposed to work; there aren't standard
> mechanisms for drawing curved scrollbars.

   # If the curve interferes with UI elements such as scrollbars, the
   # UA may reduce the used value of the border radii as necessary,
   # but no more.

> Then it goes on to say:
>   # It is recommended that the UA style sheet apply overflow: hidden
>   # to elements (such as the <img> element in HTML) that are
>   # expected to be replaced elements so that their corners
>   # automatically trim to the border radius. 
> 
> I'm pretty skeptical of this advice; 'overflow: hidden' is a pretty
> heavyweight mechanism (it involves the ability to scroll
> programatically).  I suspect we'd be unable to make this change
> because it would cause a performance regression, although I haven't
> tried.

Well, two other options here are
   - Require the author to set overflow: hidden whenever he sets
     border-radius on replaced elements
   - Make all replaced elements always clip to the curve. (Is it possible
     for replaced elements to have overflow?)

~fantasai

Received on Wednesday, 10 June 2009 16:56:14 UTC