W3C home > Mailing lists > Public > www-style@w3.org > February 2011

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

From: Simon Fraser <smfr@me.com>
Date: Fri, 18 Feb 2011 08:36:48 -0800
Cc: Lea Verou <leaverou@gmail.com>, www-style@w3.org
Message-id: <175B7273-7085-4161-BD20-903579948D19@me.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:56 UTC