Comments on: Repeating Linear Madness

By: Roman Komarov

Roman Komarov — Fri, 08 Jun 2012 12:05:57 +0000

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.

By: Lars Gunther

Lars Gunther — Thu, 07 Jun 2012 20:05:01 +0000

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.

By: Christof

Christof — Mon, 04 Jun 2012 19:10:41 +0000

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!

By: Christof

Christof — Sat, 02 Jun 2012 11:38:35 +0000

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

By: Christof

Christof — Fri, 01 Jun 2012 20:44:22 +0000

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 …

By: Aldrik

Aldrik — Thu, 31 May 2012 15:47:31 +0000

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

By: Eric Meyer

Eric Meyer — Thu, 31 May 2012 13:44:05 +0000

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?

By: Eric Meyer

Eric Meyer — Thu, 31 May 2012 13:42:05 +0000

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.

By: tom jones

tom jones — Thu, 31 May 2012 12:37:11 +0000

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?

By: Christof

Christof — Thu, 31 May 2012 11:32:21 +0000

IE10 screenshot: http://img807.imageshack.us/img807/6374/ie10.png

By: Christof

Christof — Thu, 31 May 2012 11:23:36 +0000

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

By: Hugo

Hugo — Thu, 31 May 2012 07:13:40 +0000

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.

By: Matt

Matt — Thu, 31 May 2012 00:29:33 +0000

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.

By: Aldrik

Aldrik — Wed, 30 May 2012 21:01:54 +0000

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

By: Roman Komarov

Roman Komarov — Wed, 30 May 2012 20:59:07 +0000

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.