Repeating Linear Madness
Published 12 years, 6 months pastMy 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.
Comments (17)
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:
http://dabblet.com/gist/2838873
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.
GNU/Linux: firefox v12 and libwebkit v1.8.1 (no resizing issues with either).
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.
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.
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 ;)
IE10 screenshot: http://img807.imageshack.us/img807/6374/ie10.png
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?
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.
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?
Eric: It appears to be a strange bug to do with background positioning.
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 …
Eric: IE10 on Win8RC has the exact same shadow problem like on consumer preview. You might want to file a bug report ;)
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!
Firefox 12-15 on Linux is indeed rock steady. But this does not hold up: because Chrome makes a mess of it.
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 — http://i.kizu.ru/misc/iOSgradients1.png
However, the same thing happens for simple linear gradients, so no perfect pixels for us there.
And now, it is 2015, and Chrome still makes a big ugly mess of that test page (http://meyerweb.com/eric/css/tests/gradient-repeat.html). Wonder why this has never been fixed?
Late 2017 – everything looks OK both on FF and Chrome.