New issue
Advanced search Search tips

Issue 750555 link

Starred by 1 user
Status: Untriaged
Owner: ----
Cc:
pnangunoori@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Compat



Sign in to add a comment

CSS border around linear-gradient causes banding to appear in gradient

Reported by yan.mosy...@gmail.com, Jul 31 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3171.0 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Download and open attached reduced testcase file
2. Observe the initial gradient
3. Click the "Toggle border" button and observe the gradient

What is the expected behavior?
Both gradients should look the same

What went wrong?
Banding is observed in gradient when border is present.

Hint: Use your OS's zoom feature in case banding isn't noticeable.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 62.0.3171.0  Channel: canary
OS Version: 10.0
Flash Version: 

See attached gpu.htm for GPU info
linear-gradient_border_banding.html
747 bytes View Download
gpu.htm
106 KB View Download

Comment 1 by pnangunoori@chromium.org, Aug 1 2017

Cc: pnangunoori@chromium.org
Labels: M-62 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Tested on Chrome Stable #60.0.3112.78, Canary #62.0.3173.2 on Windows 7, Mac 10.12.6, Ubuntu 14.04 and able to reproduce the issue. Screenshot is attached for reference.

This is a non-regression issue and able to reproduce from M-45 #45.0.2454.85. Marking it as untriaged so that issue gets addressed.

Note: Behavior seems to be same on FireFox.

Thanks.
750555.png
540 KB View Download

Comment 2 by yan.mosy...@gmail.com, Aug 1 2017 

@c1 Thank you. It's interesting but in your screenshot I see banding even in gradients with no border around them. However, Chrome 45 looks the smoothest among all and I don't see banding there with or without border around gradient.

I tested with Firefox 54.0.1 (64-bit) locally and can confirm that even more pronounced banding is present with and without border. In fact, gradient pattern doesn't change on border toggle and always shows up with banding.

Comment 3 by pnangunoori@chromium.org, Aug 2 2017

Components: Blink>CSS

Comment 4 by meade@chromium.org, Aug 3 2017

Components: -Blink>CSS Internals>Skia Blink>Paint
This could be a paint or skia issue, assigning to their queues for triage.

Comment 5 by schenney@chromium.org, Aug 4 2017

Components: -Blink>Paint
Labels: BugSource-User PaintTeamTriaged-20170804
The banding is present with or without the border in Chrome 60.0.3112.78 Linux.

This is almost certainly a GPU rendering issue and may be unavaoidable.

Comment 6 by yan.mosy...@gmail.com, Sep 5 2017 

I've taken a second look at the gradients from c1 with a better display and indeed I can see that in case of Chrome 60/62 actually it's the pattern of the banding which is changing when border is added, the banding itself is present with or without the border.

Chrome 45 renders both gradients very smoothly.

Firefox renders gradients with banding but with different pattern.
►

Sign in to add a comment