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:25:37 -0800
Message-ID: <AANLkTinucQ-7zVVESQam4S9Qqozb8eetEdXWyw7z3STh@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: www-style@w3.org
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>).  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.

Received on Friday, 18 February 2011 16:26:30 UTC

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