Linear-gradient is blurry
Reported by
nfa...@gmail.com,
Feb 7 2018
|
|||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
Example URL:
Steps to reproduce the problem:
1. Define a gradient background as described
2. View in browser
What is the expected behavior?
The output should be crisp.
What went wrong?
The output is blurry.
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: 64.0.3282.140 Channel: stable
OS Version: 10.0
Flash Version:
The screenshot shows Chromium and Edge displaying the same webpage. The style is:
body {
background: repeating-linear-gradient(
-45deg,
rgba(0,0,0,0),
rgba(102,102,102,0.4) 3px,
rgba(26,198,204,0.1) 3px
);
}
,
Feb 12 2018
Tested on latest Chrome Stable #64.0.3282.140, Canary #66.0.3345.0 and Chrome #60.0.3072.0 on Windows 10, Mac 10.13.3 and Ubuntu 14.04 and able to reproduce the mentioned behavior. This is a non-regression issue and able to reproduce from M-60 #60.0.3072.0. Marking it as untriaged so that issue gets addressed. Note: 1. Rendering seems to be same on FireFox and IE. 2. Attached the screenshot and sample HTML for reference. Thanks!
,
Feb 13 2018
,
Feb 13 2018
,
Feb 13 2018
This is very nasty aliasing of the gradient. Did we turn of anti-aliasing for this case? I should not be a tiling case because it is one full-window background image.
,
Feb 13 2018
This is not a merge candidate so removing Target-XX labels.
,
Feb 13 2018
The aliasing in c#0 is bad enough, but the later examples look even worse due to tiling artifacts.
It appears we are wrapping the gradient inside a picture shader, using 8-pixel-high tiles, and this tiling is causing the jarring seams.
Looking at the CSS, I don't immediately notice a reason for tiling 8-px high rows:
<style>
body {
background: repeating-linear-gradient(
-45deg,
rgba(0,0,0,0),
rgba(102,102,102,0.4) 3px,
rgba(26,198,204,0.1) 3px
);
}
</style>
</body>
So I think we're looking at two different issues:
1) hard-stop aliasing in Skia (see also issue 408528)
2) tiling artifacts due to Blink geometry/paint decisions
,
Feb 14 2018
I presume we implement "repeating-linear-gradient" as tile to repeat, rather than telling Skia it repeats. Can we even do the latter without making a very set of stops for the gradient?
,
Feb 15 2018
We do do use kRepeat for gradients as needed, but that controls "tiling" the color stops in gradient space/along the gradient axis (45deg in this case). We use picture shader for tiling on top of that to implement background-image tiling semantics - rectangular tiles axis-aligned to the CSS box. In this particular case I don't see why we need to tile the background image at all, but I must be missing something because FF also seems to do the same. As defined, the gradient "image" must have an intrisic height of 8, but I fail to see where that's coming from. Time to check Safari.
,
Feb 15 2018
Maybe the "8" has some relation to the <body> UA style (which has 'margin: 8px'.)
,
Feb 15 2018
Yup, it must come from some <body> sizing rule... although I still find it odd: the size of the box is 100% x 8px, but then we're filling a background for 100% x 100%? I seem to recall some special rules around <body>/<html> background sizing, prolly what's going on. Regardless, this behavior is consistent across browsers -- so I think #2 is a non-issue. See https://codepen.io/fmalita/pen/xYXoXz w/ attached shots. #1 can be observed if we force the size to 100% x %100 (https://codepen.io/fmalita/pen/qxPeWw), and I suspect that's just the known hard-stop aliasing issue. Of all browsers, only Edge appears to anti-alias hard stops and draw a smooth gradient (per c#0).
,
Feb 15 2018
I guess in this case we're painting <body> background for <html> (or LayoutView) which will layout-wise will be 100%x8px (8 because of margin collapsing), presumably that's the positioning area, while the whole viewport is filled. Or something like that. |
|||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||
Comment 1 by susanjun...@techmahindra.com
, Feb 7 2018