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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 18 Feb 2011 08:55:37 -0800
Message-ID: <AANLkTim8RtoaTS9BsczFRBhW72KrY9CcH_sd0OxxjJ40@mail.gmail.com>
To: Simon Fraser <smfr@me.com>
Cc: Lea Verou <leaverou@gmail.com>, www-style@w3.org
On Fri, Feb 18, 2011 at 8:36 AM, Simon Fraser <smfr@me.com> wrote:
> 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.

Excellent, thanks Simon!  I just found that my bug hadn't been
confirmed (as I didn't have confirm privileges at the time), so I gave
it to you.  ^_^


>> 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>

I tested with Chrome/Linux as well (using a canary build from a few
weeks ago) and got the result.  I dunno if we use CG on that platform
or not.

~TJ
Received on Friday, 18 February 2011 16:56:33 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT