[chromium-bugs] Re: Issue 41756 in chromium: WebKit gradients show banding on Chrome

[chro...@googlecode.com]

Comment #4 on issue 41756 by senor...@chromium.org: WebKit gradients
show banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Using a color picker, you can see that the RGB values of the gradient are
monotonically
increasing: 16, 17, 18, 19, etc. The banding is caused by the fact that 8
bits per
component is just not precise enough to capture the range of human vision,
especially
in the blacks.

We could fix it by doing 16bits per component rendering, which has about
0.1% display
hardware market penetration right now, or make it look better by dithering,
which would
introduce noise (I imagine the latter is what Safari does).

--
Automated mail from issue updates at http://crbug.com/
Subscription options: http://groups.google.com/a/chromium.org/group/chromium-bugs

[chro...@googlecode.com]

Updates:
Owner: r...@google.com
Cc: senorbla...@chromium.org

Comment #9 on issue 41756 by senor...@chromium.org: WebKit gradients

show banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

(No comment was entered for this change.)

[chro...@googlecode.com]

Updates:
Cc: jam...@chromium.org mih...@chromium.org

Comment #12 on issue 41756 by tha...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

To fix this bug, the change to SkUserConfig I landed in r71607 needs to be
reverted. This will require rebasing a bunch of tests in webkit. You also
need to check how much this affects performance; I'm attaching a simple
gradient performance benchmark. I don't know how much of a hit we're
willing to take for this, jamesr or mihaip can probably comment on this
(for reference, the benchmark gets ~24 fps on my Mac Pro, where we render
gradients using CoreGraphics).

Attachments:
animated-gradient.html 2.3 KB

[chro...@googlecode.com]

Comment #13 on issue 41756 by mih...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

If dithered rendering performance with Skia is comparable to CoreGraphics,
then enabling this seems reasonable.

[chro...@googlecode.com]

Comment #14 on issue 41756 by tha...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Does anyone have a linux or windows box? If so, can you check how many FPS
you get in a release build in the attachment to comment 12
a) with a trunk build
b) with a trunk build that doesn't have the
SK_DISABLE_DITHER_32BIT_GRADIENT #define in skia/config/SkUserConfig.h ?

[chro...@googlecode.com]

Updates:
Owner: scro...@google.com
Cc: r...@google.com

Comment #15 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

skia/config/SkUserConfig.h : SK_DISABLE_DITHER_32BIT_GRADIENT

[chro...@googlecode.com]

Updates:
Owner: ---
Cc: epo...@chromium.org

Comment #16 on issue 41756 by tha...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

epoger: Fixing this requires changing a single line (see comment 12 / 15),
doing a quick perf sanity check, and then landing many webkit rebaselines.
You're probably pretty good at landing baselines at the moment; do you want
to give this a try?

[chro...@googlecode.com]

Updates:
Owner: r...@google.com

Comment #17 on issue 41756 by r...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

(No comment was entered for this change.)

[chro...@googlecode.com]

Comment #19 on issue 41756 by epo...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Nico, let me make sure I understand all this:

- There is Skia code that will generate nicer (less "bandy") gradients in
http://code.google.com/p/skia/source/browse/trunk/src/effects/SkGradientShader.cpp ,
but it is disabled if SK_DISABLE_DITHER_32BIT_GRADIENT is defined.

- SK_DISABLE_DITHER_32BIT_GRADIENT is not defined within the Skia code or
build scripts, so Skia-only builds get these nicer gradients already (and
no DEPS roll is required to pick up the feature).

- Chrome *does* define SK_DISABLE_DITHER_32BIT_GRADIENT , in
http://src.chromium.org/svn/trunk/src/skia/config/SkUserConfig.h , so
Chrome is not getting the nicer gradients yet.

There are two concerns associated with removing the definition of
SK_DISABLE_DITHER_32BIT_GRADIENT from
http://src.chromium.org/svn/trunk/src/skia/config/SkUserConfig.h :

1. there may be a performance hit
2. lots of images will need to be rebaselined for all platforms that use
Skia

Have I got all that right?

[chro...@googlecode.com]

Updates:
Labels: -Mstone-X -OS-Windows -OS-Linux Mstone-18 OS-All

Comment #21 on issue 41756 by tha...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Hi epoger, do you think you can get to this for m18?
http://tjrus.com/iphone shows more banding on mac with skia than it did
before, it would be nice if we wouldn't regress this due to the skia switch.

[chro...@googlecode.com]

Comment #27 on issue 41756 by tha...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

http://host0001.webd.pl/bugs/chrome/linear-gradient.html (from the dupe)
looks really bad: only 11 (!) steps for a gradient from white to black (see
screenshot). That's worse than just missing dithering on 8bpp/channel.

Attachments:
Screen shot 2012-01-04 at 9.38.35 PM.png 96.4 KB

[chro...@googlecode.com]

Comment #28 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Yes, multiple color-stops show up a limitation in our current impl. Will
fix asap.

[chro...@googlecode.com]

Updates:
Owner: tomhud...@chromium.org

Comment #29 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

(No comment was entered for this change.)

[chro...@googlecode.com]

Comment #30 on issue 41756 by tomhud...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Two different bugs seem to have gotten conflated here: tjrus.com/iphone and
host0001.webd.pl/bugs/chrome/linear-gradient.html are actually displaying
different issues with linear gradient.

1. A large smooth gradient across a relatively-narrow section of the color
space.
2. A large gradient with a sharp discontinuity in the middle.

I have a pending Skia patch that fixes the latter but not the former (in
both cases only for the special case of *purely vertical* linear gradients,
since the more general case costs us a 5x performance penalty). It may be
able to fix #1 as well; experimenting with that today.

Dithering would not fix #2. As far as we can determine, fixing #2 will
require a severe performance hit; we can try to write code to only incur
that performance hit if necessary, but there'll be a pretty sharp
discontinuity in quality between a gradient that activates the expensive
code path and one that doesn't.

[chro...@googlecode.com]

Updates:
Cc: r...@chromium.org tomhud...@chromium.org

Comment #34 on issue 41756 by tomhud...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Issue 123491 has been merged into this issue.

[chro...@googlecode.com]

Updates:
Labels: -Mstone-21 Mstone-22

Comment #36 on issue 41756 by tomhud...@chromium.org: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

[chro...@googlecode.com]

Comment #37 on issue 41756 by bentr...@comcast.net: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

I'm trying to use large, subtle radial gradients on a number of sites and
this issue is driving me crazy. I'd love to get this fix, which seems to be
almost complete already, landed in Chrome before a new site of mine
launches (months away, that's why I'm trying to figure this out now).

I'd be happy to try to set up the tests so that they will work with this
change, if that would be helpful. I can also try benchmarking, although I
don't think dithering should be that big of a deal, performance-wise.

I've attached another test file (with linear and radial gradients) and
screenshots in Safari, Firefox Nightly, and Chromium. -moz-linear-gradient
and -moz-radial-gradient dither as expected in Firefox.

Attachments:
GradientTest.html 436 bytes
GradientChromium 147278.png 90.9 KB
GradientSafari 5-1-7.png 301 KB
GradientFirefoxNightly2012-07-20.png 303 KB

[chro...@googlecode.com]

Comment #44 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

It's amazing to see this very serious bug preventing the use of any CSS
gradients in Chrome. It's been 3 years and 1 month since this was reported
to you guys, and since then MS released IE10 which supports smooth CSS
gradients, so does Safari, Firefox and even Opera! It's sad to know that
Opera will switch to Blink and lose in the same time the ability to render
CSS gradients correctly.

Sometime I hope that Google never tried to make a web browser. It's not the
amount of features that matter, it's how fast the vendor reacts and its
general responsiveness when it come to solving blocking issues like this
one in a reasonable time, and 3 years and 1 month IS NOT a reasonable
response time.

Sincerely,
Palina Zarth

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chro...@googlecode.com]

Comment #45 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

I also wanted to add that according to the W3C guidelines, gradients should
be transitionable like any other property, and unfortunately Chrome does
not support transitions with gradients at all.

For information IE10 does support transitioning gradients, and it does it
very smoothly, not to say that the gradient itself is very smooth and
doesn't have any banding.

For me Chrome is the next IE: a cumbersome software that is too big and too
complex in order to be able to resolve bugs like those in less than 3 years
delay.

[chro...@googlecode.com]

Comment #47 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

@46 Yes this definitely appears on the Chrome error pages. This is sooo
obvious I don't understand how this was tolerated for the past 3+ years!

Just unplug your internet and try accessing any website.

Attachments:
Chrome cannot render gradients.png 36.6 KB

[chro...@googlecode.com]

Comment #48 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Using the test page on #37, I no longer see the banding. I'm on M26 on the
mac.

[chro...@googlecode.com]

Comment #53 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

#49 looks much much better than #37, agreed? At least on a Mac monitor, I
don't see any banding on #49.

[chro...@googlecode.com]

Comment #54 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

@53 did you forget to display the image at 100% by clicking on it? In
Chrome the image will be scaled down (if your screen resolution is lower
than the image) making the gradient nice and smooth, however displaying
this screenshot at original size is required to see the ugly banding.

If you still don't see them then you really have a problem, either your
browser is applying dithering on images to force smooth gradients
(http://en.wikipedia.org/wiki/Dither), either you're working on a CRT
monitor, or last possibility: your eyes are just fucked. Sorry for the
expression but it's just so flagrant...

[chro...@googlecode.com]

Comment #55 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

attachment in #37 looks very banded to us
attachment in #49 looks very smooth to us

Several of us in the office are viewing these both on a Mac monitor, and on
Linux using an HP monitor.

#54 do you see a quality difference between the attachments in #37 and #49?

[chro...@googlecode.com]

Comment #56 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Okay that's really crazy, here's a picture of my screen taken with my
camera:



Attachments:
DSCN0817.JPG 3.3 MB

[chro...@googlecode.com]

Comment #57 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

@55 Yes I see a difference, the banding on both #37 and #49 is terrible and
is even stronger on #49.

I just uploaded a picture of what I see on Chrome on my laptop. Note that
the exact same gradients are super smooth on Firefox, Safari, IE and Opera.
Tested all 5 browsers and Chrome is the only one showing the horrible
banding, so this is not related to my screen/eyes/whatever.

[chro...@googlecode.com]

Comment #58 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

This bug is affecting the Google logo on Gmail, Google Maps, and so on.

Screenshots attached.

Attachments:
Chrome VS Safari.JPG 95.7 KB
Chrome.JPG 206 KB
Safari.JPG 205 KB

[chro...@googlecode.com]

Comment #59 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

I just wanted to make sure that the gradient around the Google logo was a
CSS gradient and not an image, so inspecting the element shows the
following:

#gbx1, #gbx2 {
background: #f1f1f1;
background: -webkit-gradient(radial,100 36,0,100
-40,120,from(#fafafa),to(#f1f1f1)),#f1f1f1;
}

So when you visit Google websites using the Google browser you actually get
the worse experience, it is recommend that you access Gmail/Maps/etc. from
Safari!

Soon Google will display the following at the bottom of its
websites: "Optimized for Firefox, Opera, IE or Safari. Avoid Chrome".

LOL

[chro...@googlecode.com]

Comment #60 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Sorry just one last precision: the previous images are not screenshots but
actual pictures of my LCD screen taken with my physical camera.

[chro...@googlecode.com]

Comment #61 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Why is this issue still not merged with
https://code.google.com/p/chromium/issues/detail?id=226753
?

How can an so serious bug stays unfixed for so many years? With all the
information and evidences we have provided to you, at least confirm and
provide an ETA!

[chro...@googlecode.com]

Comment #62 on issue 41756 by t...@parallaxmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

For me, I have not seen this issue in a long time. I go to the links that
are provided and 90% of the time, I do not see the issue. The Google logo
above is an example

[chro...@googlecode.com]

Comment #63 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Why is this issue still not merged with
https://code.google.com/p/chromium/issues/detail?id=226753
?

How can a so serious bug stays unfixed for so many years? With all the

information and evidences we have provided to you, at least confirm and
provide an ETA!

[chro...@googlecode.com]

Comment #64 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Do you intend to fix this bug anytime this year? any ETA?

[chro...@googlecode.com]

Comment #65 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

I'm sorry, but we have not been able to reproduce what you're seeing. We
will keep looking, but at the moment, without a case we can see, we don't
know what change to try.

[chro...@googlecode.com]

Comment #66 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

For information this issue is still here in the latest Chrome Canary
(Version 29.0.1546.0 canary).

It's been reported for three and a half years, please provide an ETA.

[chro...@googlecode.com]

Comment #67 on issue 41756 by jonatan....@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Here's a test case for you that clearly shows banding in Chrome but not in
Safari:

http://jsfiddle.net/3fe2a/



Attachments:
chrome-banding.png 9.5 KB
safari-smooth.png 5.0 KB

[chro...@googlecode.com]

Comment #68 on issue 41756 by marvin.s...@googlemail.com: WebKit gradients

show banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

IE10 also does not have banding. I can reproduce the issue with the
jsfiddle of Aug 14, 2013 in Chrome 30.0.1599.37 beta-m. It is a problem for
our website that is forcing us to fall back to a background-image. That
should not be necessary.

Please also consider adding dithering to gradients besides resolving this
issue by removing the overly big color bands.

[chro...@googlecode.com]

Comment #69 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

#67 - thanks for the new test-case http://jsfiddle.net/3fe2a/ -- this is a
different (internal) issue for our gradients, and we are starting to work
on it.

#37 -- I've attached your test case (grad.html). This one is fixed now in
chrome, and should be properly dithered.


Attachments:
grad.html 513 bytes

[chro...@googlecode.com]

Comment #70 on issue 41756 by jonatan....@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Weeehoo.

[chro...@googlecode.com]

Comment #71 on issue 41756 by ryanrub...@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Here is a very simple test that shows just how horrible gradients look in
Chrome. The screenshot is taken with Chrome 30 maximized at 1920x1080.
Notice how the body background and large div look horribly banded, but the
smaller div with the same gradient background is nice and smooth. All 3
gradients render perfectly smooth in Firefox and IE10.

Attachments:
simple-test.html 511 bytes
simple-test.png 19.5 KB

[chro...@googlecode.com]

Comment #72 on issue 41756 by TheShado...@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Still no fix for this bug after how many years? Seriously? Why is chrome
turning into the worst browser?

Here is what I'm seeing and the CSS which causes the banding problem on the
current version of chrome on Windows 7.

body {
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100,
color-stop(0%, #ffffff), color-stop(50%, #ff0000), color-stop(100%,
#000000)) fixed;
background: -webkit-radial-gradient(50% 50%, circle farthest-corner,
#ffffff, #ff0000, #000000) fixed;
background: -moz-radial-gradient(50% 50%, circle farthest-corner,
#ffffff, #ff0000, #000000) fixed;
background: -o-radial-gradient(50% 50%, circle farthest-corner, #ffffff,
#ff0000, #000000) fixed;
background: radial-gradient(50% 50%, circle farthest-corner, #ffffff,
#ff0000, #000000) fixed;
}

The window on the left is Firefox and on the right is Chrome. As we can
see, the white center of the chrome gradient is a disk and surrounded by
concentric circles (the first circle around the white is the worst). The
white circle in the center is totally white (255, 255, 255) out all the way
to the visible edge. Test this out for yourselves.



Attachments:
Like a Sun.png 1.2 MB

[chro...@googlecode.com]

Updates:
Owner: r...@google.com

Comment #73 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

I think the last few are examples of multiple-colors in the gradients
running into our 256-entry table.

[chro...@googlecode.com]

Comment #74 on issue 41756 by ryanrub...@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

... why in the world would gradients be limited to 256 colors? And why
would 244 of the 256 entries be the *same* color? In my example, there is
clearly only 13 total colors used between the red corner and the green
area. That means the last 243 entries are just duplicates of the 13th -
solid green.

[chro...@googlecode.com]

Comment #75 on issue 41756 by r...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

sorry, my comment was a bit confusing. It was a note-to-self about a
possible implementation reason for the bug, not a public limitation of
gradients.

[chro...@googlecode.com]

Comment #78 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Happy Birthday to you, issue ID 41756, you are now 4 years old :) I'm
really proud of you 41756, you didn't grow by a bit!

[chro...@googlecode.com]

Comment #79 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Sorry I'm late, actually its birthday was yesterday, not today! So it's 4
years and 1 day already. As it's too late to wish you a short and limited
life, I can only wish you a long and extended life with many comments and
complains! All the best my dear 41756!

Sincerely,
Your pal

[chro...@googlecode.com]

Comment #80 on issue 41756 by anonymous84327: WebKit gradients show banding
on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

To re...@google.com :

Maybe we can remove the following flags:

MovedFrom-20
MovedFrom-23

It's more than 11 versions ahead so those are quite obsolete now, and while
it's good to know that you were planning to fix this issue back in version
20, 4 years ago, we're now in version 34, 4 years later, so better be
realistic than fantasist especially when so many people are counting on
you :)
Cheers

[chro...@googlecode.com]

Comment #83 on issue 41756 by ryanrub...@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

There are other cases that are clearly this same horrible gradient bug, but
don't result in the same kind of color banding. For example:
http://jsfiddle.net/7C7ey/
In Firefox and IE, this simple repeating gradient makes diagonal black and
white lines 2 pixels wide, repeating forever, smoothly drawn and seamlessly
repeating.
On Chrome, I don't even know what the heck is happening. It's almost as if
the lines aren't even at a 45 degree angle, despite clearly in the CSS that
they should be. There is no grey or smoothness between the lines, just this
haphazard mixture of random-width white and black chunks, that vary in
width even on the same line segment.


Attachments:
diag-lines.png 112 KB

[chro...@googlecode.com]

Comment #84 on issue 41756 by zscre...@gmail.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

Here's another site with a whole list of affected samples:
http://css-tricks.com/examples/CSS3Gradient/

I've also noticed that as you scroll the page the banding flickers between
dark bands and light bands.

In my opinion this is a pretty major rendering issue. Any way we could get
a progress update on this?

And just out of curiosity, why would Chrome have this issue but not Firefox
even though they both use Skia to draw gradients?

Attachments:
Screenshot.png 230 KB

[chro...@googlecode.com]

Comment #85 on issue 41756 by mce...@google.com: WebKit gradients show

banding on Chrome
http://code.google.com/p/chromium/issues/detail?id=41756

FYI: Affects SVG gradient rendering as well. Visible banding.

[chro...@googlecode.com]

Updates:
Cc: pkas...@chromium.org

Comment #87 on issue 41756 by pkas...@chromium.org: WebKit gradients show
banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

It looks as if this issue has turned into a catch-all bug for all possible
gradient rendering quality issues, even if they have different causes.

It's hard for anyone to look at this bug and make precise sense out of
what's going on in it, so I've asked Mike if he could break this down into
separate new bugs for each unfixed issue above that has a different cause.
This makes tackling each one more tractable. (Other Skia folks, please
feel free to step in and help here?)

Once that's done, I think this bug should be closed. The original report
in the first comment seems to have been fixed, so all the different legit
followon issues people have found would be best tackled separately.

[chro...@googlecode.com]

Comment #88 on issue 41756 by zscre...@gmail.com: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Okay I want to make this very clear because I think there's a lot of
confusion... None of the examples listed on this thread have been fixed.
The original example is still broken (on Canary v41 on Win8.1). #69 the
example you posted back saying was fixed is NOT fixed. And every other
example I've tried is broken as well. I'm attaching new version's of #1 and
#69 that use the standard gradient syntax so you can test this
cross-browser.

This has nothing to do with dithering. No browser dithers gradients. Chrome
just isn't including all possible color steps in a gradient, and is also
creating some sort of banding artifact. IE11 and FF render all of these
examples identically. Chrome does not.

I noticed that putting Canary into Ganesh mode through
--force-gpu-rasterization fixes ALL of the issues. All gradients look
exactly the same as FF and IE in Ganesh mode. So there's clearly a problem
when Skia is rendering gradients in software mode.

Attachments:
Example1.html 228 bytes
Example69.html 389 bytes

[chro...@googlecode.com]

Comment #89 on issue 41756 by zscre...@gmail.com: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

This one still comes out differently than IE and FF even with gpu
rasterization though: http://jsfiddle.net/7C7ey/

Again, IE and FF are like pixel-perfect indentical. Safari looks almost
identical as well. It's just Chrome that is rendering significantly
differently.

[chro...@googlecode.com]

Comment #90 on issue 41756 by ryanrub...@gmail.com: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Interesting. Better without Skia for sure, but still full of really weird
issues. Check out http://jsfiddle.net/7C7ey/13/ (changed to 0deg and 500px)
and it's still really wrong without Skia. It's like their pixel alignment
is off and the repeating is really funny.
Works fine in FF and IE of course, but renders different in the two. In
Firefox the first two pixels are solid white, then two black, repeating. IE
does a white row, grey, black, grey, repeating. I think it's a difference
of aligning the gradient to pixel-center or pixel-edge, which the CSS spec
may not really clarify. Either way though, the repeating is smooth and
acceptable, unlike in Chrome with or without Skia, which is just wrong no
matter what.

[chro...@googlecode.com]

Comment #91 on issue 41756 by ryanrub...@gmail.com: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Something looks like it changed for the better in Chrome 42, is there a
related bug that has details? The jagged edges are no longer present on the
gradients at 45 degree angles, but even simple things like the black/white
stripes aren't evenly spaced, despite the gradient repeating every 4
pixels...

[chro...@googlecode.com]

Comment #92 on issue 41756 by meiermue...@gmail.com: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Just wondering and hoping for an answer: Did this patch introduce temporal
dithering? Or is it static? I suffer from eyestrain and noticed some time
ago that I cannot use Chrome anymore. Firefox is no problem.

[chro...@googlecode.com]

Comment #93 on issue 41756 by m...@blixt.org: WebKit gradients show banding
on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Here's the cross-browser CSS for a gradient that makes this issue very
apparent using black and white.

background: linear-gradient(to right, #fff 0%, #000 10%, #000 90%, #fff
100%);

(Attached screenshot is Chrome 45.0.2454.101 (64-bit) on Mac OS X 10.10.5)

Attachments:
Screen Shot 2015-09-27 at 5.08.39 PM.png 384 KB

[chro...@googlecode.com]

Updates:
Owner: r...@chromium.org

Comment #96 on issue 41756 by chri...@chromium.org: WebKit gradients show

banding on Chrome
https://code.google.com/p/chromium/issues/detail?id=41756

Assigning to reed@ for the next step, which is to try implementing a
version of
gradients that has larger or unlimited banding resolution. Then we (I? :) )
can
try to figure out the best performance/quality tradeoff point.