gradients "linear-gradient" "to left top" are jagged
Reported by
t...@tobireif.com,
Apr 12 2016
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36 Example URL: http://codepen.io/yoksel/pen/IirGH Steps to reproduce the problem: 1. Load http://codepen.io/yoksel/pen/IirGH in Chrome. (demo by http://codepen.io/yoksel/ ) 2. View the pattern. What is the expected behavior? Nice rendering, eg as in Firefox. What went wrong? Very jagged edges in Chrome, please see the screenshots. Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? N/A Does this work in other browsers? Yes Chrome version: 49.0.2623.110 Channel: stable OS Version: OS X 10.11.4 Flash Version: Some code: background-image: -webkit-linear-gradient(right bottom, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%), -webkit-linear-gradient(left bottom, violet -5%, violet 5%, teal 0%, teal 10%, steelblue 5%, steelblue 15%, skyblue 10%, skyblue 20%, yellowgreen 15%, yellowgreen 25%, yellow 20%, yellow 30%, gold 25%, gold 35%, orange 30%, orange 40%, crimson 35%, crimson 45%, purple 40%, purple 50%, violet 45%, violet 55%, teal 50%, teal 60%, steelblue 55%, steelblue 65%, skyblue 60%, skyblue 70%, yellowgreen 65%, yellowgreen 75%, yellow 70%, yellow 80%, gold 75%, gold 85%, orange 80%, orange 90%, crimson 85%, crimson 95%, purple 90%, purple 100%) background-color: orangered
,
Apr 12 2016
Also see https://twitter.com/TobiReif/status/719864553157345282 : Strangely, it ~works with "background-size" set to eg "100px 100px" / "200px 200px" / "400px 400px" - but it's jagged with eg "300px 300px" / "210px 210px".
,
Apr 12 2016
Don't think this is Mac-specific (certainly isn't CoreAnimation-specific). Moving over to Raster.
,
Apr 13 2017
This issue has been available for more than 365 days, and should be re-evaluated. Please re-triage this issue. The Hotlist-Recharge-Cold label is applied for tracking purposes, and should not be removed after re-triaging the issue. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 13 2017
The problem is still there in the latest Canary. I hope it can be fixed soon.
,
Apr 13 2017
I haven't debugged this, but it seems similar to some of the background-image scale issues we've seen in the past.
,
Apr 16 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 20 2018
cc'ing paint/compositor experts I can still reproduce this on a MBP.
,
Apr 20 2018
,
Apr 23 2018
AT 125% it looks fine. At 100% it looks bad. Seems like an issue tiling gradients, which is not real surprising.
,
Apr 23 2018
Thanks for investigating! Is the issue fixable? I think it works correctly in Firefox.
,
Apr 23 2018
Possibly fixable. I'll look at it as part of my attempt to fix all the known background image issues. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by ellyjo...@chromium.org
, Apr 12 2016Owner: ccameron@chromium.org
Status: Assigned (was: Unconfirmed)