Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Repeating Linear Madness

My detailed studies of CSS3 have, of late, taken me into the realm of repeating linear gradients.  I’m not going to attempt a Lovecraft parody for this post, though I seriously considered it.  Instead, I’m going to give you a summary of where we stand with repeating linear gradients, followed by some details.

The summary is as follows: NOT READY FOR PRIME TIME.  In fact, not even ready for safe harbor in Europe.  Whether they will become ready for use is up to the various browser makers.

I came to this conclusion after creating and evolving a test case for pattern regularity.  The test compares a repeated PNG (red) with two theoretically equivalent repeating-linear-gradient images (blue and blue).  The two repeating linear gradients are expressed differently, but should yield the same result.  The visual result of the test should be a perfect interleaving where the blue and red patterns overlap.

To see what I mean, load up the test in Opera; or take a look at this screenshot of the first eight cases, taken in Opera.  Either one will show you the reference rendering for this test case.  Regular repetition and seamless interleaving, no matter what you do with the browser window’s size.  That was and is the intended result.

If you want to go all the way to the other end of the spectrum, load up the same test in Chrome or Canary.  It will be…different, at least in my testing on OS X and Windows.  For extra fun, try dragging the browser window to resize.  AHHHHGGGH.

In Firefox 12/Aurora 14 and Safari 5.1.7, all on OS X, I see something very close to Opera, except there are little one-pixel missteps here and there.  Even better, the positions of these missteps will be different between the two gradient patterns; that is, for a given test the missteps on the top test will almost certainly be different than those on the bottom—assuming there are any at all.  And all that was about as vague as can be because the missteps depend on the width of the element; again, try drag-resizing the browser window.  Crawling artifacts!

I’m sorry, I promised no Lovecraft.

I’ve been told that Firefox 12 for Windows is rock-steady and Opera-regular, but I haven’t yet been able to verify that.  I also haven’t tried out IE10 to see where, if anywhere, they stand with this.  I imagine every build of every Linux browser ever has this nailed 100%, because that’s all Linux users say every time I launch one of these tests.  Go you!

The point of all this being, as if I needed to restate it: don’t depend on repeating-linear-gradient for much of anything right now.  There is pretty clearly a metric massload of work to be done before we can start calling these safe to use.

16 Responses»

    • #1
    • Comment
    • Wed 30 May 2012
    • 1659
    Roman Komarov wrote in to say...

    Oh, wow, so strange rendering in Webkits and Fx.

    However! There is a little fix that can make such gradients work everywhere like intended: just add the background-size for each of them so it would be equal (or even) to the size of the each of the repeated patterns:

    Also, there is a big chance that adding the size to any gradients would be better for perfomance: when gradient is stretched over 100% of it’s block, the browser need (I suppose) to make an image of that size despite the repeating parts.

    • #2
    • Comment
    • Wed 30 May 2012
    • 1701
    Aldrik wrote in to say...

    GNU/Linux: firefox v12 and libwebkit v1.8.1 (no resizing issues with either).

    • #3
    • Comment
    • Wed 30 May 2012
    • 2029
    Matt wrote in to say...

    Thanks for the great test case Eric, I hate to be the one to rain on the Linux users parade but Chrome 19 on Ubuntu fails just as miserably as it does on OS X and Windows.

    • #4
    • Comment
    • Thu 31 May 2012
    • 0313
    Hugo wrote in to say...

    Hi Eric, and thanks for sharing. What a mess this is !

    From what I can say, I see absolutly no resizing issues on Firefox 12 for Windows.

    • #5
    • Comment
    • Thu 31 May 2012
    • 0723
    Christof wrote in to say...

    just tried the testpage on IE10 (Win8 Consumer Preview, so not yet the RC). And on first view looks almost as good as Firefox 12. Just some additional blue shadow effects after the blue “steps” after resize. But the overall widths are good.
    Chrome 19 does not work at all though, almost none of the widths fit. IMHO Chrome implements lots of features and quick but at the expense of quality :( It also seems to break stuff that worked in older versions. As unstable as it version numbers ;)

    • #6
    • Comment
    • Thu 31 May 2012
    • 0732
    Christof wrote in to say...

    IE10 screenshot:

    • #7
    • Comment
    • Thu 31 May 2012
    • 0837
    tom jones wrote in to say...

    i can confirm that firefox 13 (beta) on windows is steady too.. can’t get any strange behavior by resizing, but zooming in/out messes some pixels up, as expected i guess..

    anyway, how do other browser fare with zooming?

    • #8
    • Comment
    • Thu 31 May 2012
    • 0942
    Eric Meyer wrote in to say...

    Christof: Thanks for the screenshot! Looks pretty good, EXCEPT for the fade in each second test. It’s easiest to see on test #10. Those fadeouts shouldn’t be there, so far as I know. I need to ask around to be sure. If I’m right, then I need to go hunt down the latest IE bug-reporting channel.

    tom jones: Zooming does lead to artifacts in most (possibly all) browsers, and as you say, I think that’s to be expected.

    • #9
    • Comment
    • Thu 31 May 2012
    • 0944
    Eric Meyer wrote in to say...

    Aldrick: Thanks for the screenshot! I was surprised to see a lack of red in the libwebkit screenshot. Does it not support alpha-channel PNGs?

    • #10
    • Comment
    • Thu 31 May 2012
    • 1147
    Aldrik wrote in to say...

    Eric: It appears to be a strange bug to do with background positioning.

    • #11
    • Comment
    • Fri 1 Jun 2012
    • 1644
    Christof wrote in to say...

    Re IE10: just download the Win8 RC and might be able to test again on or after the weekend (if I have time and success to install it ;)
    Maybe it is better already. BTW, the fadeouts are there only half the time, when resizing they disappear and reappear depending on the width …

    • #12
    • Comment
    • Sat 2 Jun 2012
    • 0738
    Christof wrote in to say...

    Eric: IE10 on Win8RC has the exact same shadow problem like on consumer preview. You might want to file a bug report ;)

    • #13
    • Comment
    • Mon 4 Jun 2012
    • 1510
    Christof wrote in to say...

    I just submitted a bug report through the Win8 Feedback tool as I got access to it for another bug regarding transition/scale transform on hover in a navigation which sometimes seem to trigger other items to disappear :( Reminds me of disappearing bugs in IE 5 or 6 although I strongly guess it is totally unrelated. Still annoying though.

    Anyway, thanks for the testpage!

    • #14
    • Comment
    • Thu 7 Jun 2012
    • 1605
    Lars Gunther wrote in to say...

    Firefox 12-15 on Linux is indeed rock steady. But this does not hold up: I imagine every build of every Linux browser ever has this nailed 100% because Chrome makes a mess of it.

    • #15
    • Comment
    • Fri 8 Jun 2012
    • 0805
    Roman Komarov wrote in to say...

    Ah, I’ve looked at those gradients in iOS and now I don’t have any arguments in favor of the repeating-gradients at all —

    However, the same thing happens for simple linear gradients, so no perfect pixels for us there.

    • #16
    • Comment
    • Wed 11 Feb 2015
    • 2212
    Chris Snyder wrote in to say...

    And now, it is 2015, and Chrome still makes a big ugly mess of that test page ( Wonder why this has never been fixed?

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

May 2012
April June