Re: [css3-images] exactly 2 adjacent colors stops

On Tue, May 24, 2011 at 6:33 AM, Alan Gresley <alan@css-class.com> wrote:
> Thank you Tab. I was wondering because I have noticed some forking in
> behaviors between Safari and Chrome. From an authors perspective, this is
> not good (especially if it's CSS with vendor-prefixes).

This is probably because, at this point, Safari is relatively old.
Chrome has been through several versions since Safari 5 came out, so
any changes in behavior will only be reflected in Chrome.


> OK, moving onto repeating-linear-gradient that repeats over it's own tile.
>
> http://css-class.com/test/css/3/gradients/repeating-linear-gradients-stops.htm
>
> Testing with Firefox 4.0.1, Chrome 11.0.696.68, IE10 preview and Opera
> 11.11.
>
>
> The first example 'Normal repeat' shows how to repeat a linear-gradient
> using background-size.
>
> The second example 'Test 1' shows a repeating-linear-gradient with two color
> stops. Please note that all browsers except IE10, show this usual repeating
> over the background tile. IE10 shows the same as the previous example.

Yup, the Chrome behavior is expected.  The distance between the first
and last color-stops are 50px, so it repeats every 50px.  This is
equivalent to what you would get if you'd set
"repeating-linear-gradient(left, black, white 50px)".


> The next example 'Test 2' shows a repeating-linear-gradient with three color
> stops. Please note that all browsers except IE10 and Chrome, show this usual
> repeating over the background tile. IE10 seem to mirror the gradient. Chrome
> does the usual repeating over the initial tile but then it goes into
> overdrive.

Chrome's behavior in the second tile is clearly a bug.  The behavior
in the first tile is correct and expected.  Have you reported it as a
bug yet?  If not, I will.


> The examples 'Test 3' and 'Test 4' are just for IE10. The two examples
> should look identical but not in IE10.

Correct, they should be identical.


> The example 'Test 5' is the same as the example in the draft spec using
> 'repeating-linear-gradient(red 10px, blue 50px)’ and example 'Test 6' is a
> variant of this. Again IE10 is doing something wrong.

Yup, Chrome's behavior here is correct and expected.  If IE10 is doing
something different, it's wrong.


> From an author perspective a repeating-linear-gradient that repeats over
> it's own tile can give some extraordinary results. My question is, should it
> be happening in the first place? If it should, examples are needed in the
> draft spec.

I agree that the behavior of a repeating-linear-gradient when the
first color-stop is not at 0 can be slightly surprising at first, but
as soon as you grasp how it works, it's simple and easy.

~TJ

Received on Tuesday, 24 May 2011 17:16:39 UTC