Re: [css3-images] 'contain' radial gradients edge case

On Feb 18, 2011, at 8:25 am, Tab Atkins Jr. wrote:

> On Fri, Feb 18, 2011 at 7:36 AM, Lea Verou <leaverou@gmail.com> wrote:
>> Assume the following gradients:
>> 
>> background-image: radial-gradient(contain, white 99%, black 100%);
>> background-image: radial-gradient(contain, white 100%, black 100%);
>> background-image: radial-gradient(contain, white 100%, black 101%);
>> 
>> Fiddle for easy testing: http://jsfiddle.net/leaverou/qBurF/
>> 
>> The 1st and 3rd are rendered consistently in Gecko and Webkit and are just
>> what somebody would expect.
>> The 2nd has a rendering that's very disconnected from the 1st and 2nd
>> examples: It's a solid color, black in Minefield (which I is probably a bug,
>> so I reported it) and white in Webkit. I assume Webkit's rendering is
>> consistent with that the spec defines (although I couldn't find any explicit
>> instruction in Image Values), and it makes sense as it's consistent with how
>> linear gradients or other kinds of radial gradients should display. However,
>> in this case it's not what a designer would expect (which is a solid
>> ellipse) and it will make interpolation look weird. The expected rendering
>> could be useful for some cases, whereas a solid color could be easily
>> achieved in other ways.
> 
> Both browsers are being buggy in some way.
> 
> Firefox is correctly rendering #1 and #3.  Webkit *would* be rendering
> #1 and #3 correctly if it implemented elliptical gradients
> (<https://bugs.webkit.org/show_bug.cgi?id=52639>).

This was fixed a while back.

> Both are rendering
> #2 incorrectly - it should look almost exactly the same as the other
> two, with a white inner ellipse immediately changing to black.

Both may be suffering from the same underlying Core Graphics bug
if you're only testing Safari. This is logged as
<https://bugs.webkit.org/show_bug.cgi?id=51839>

Simon

Received on Friday, 18 February 2011 16:37:34 UTC