Issue 233879 in chromium: Bug with linear-gradient layout

chro...@googlecode.com

unread,

Apr 20, 2013, 10:49:00 AM4/20/13

to chromi...@chromium.org

Status: Unconfirmed
Owner: ----
Labels: Type-Bug Pri-2 OS-Windows

New issue 233879 by grifan...@gmail.com: Bug with linear-gradient layout
http://code.google.com/p/chromium/issues/detail?id=233879

Chrome Version : 26.0.1410.64 m
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari 5: OK
Firefox 20: OK
IE 10: OK

What steps will reproduce the problem?

1. add this css style for some block element:
background: -webkit-linear-gradient(left, red 0%, red 50%, blue 50%, blue
100%);

my html/css is:

<!DOCTYPE html>
<title>Template</title>
<style>
html, body {height: 100%; margin: 0;}
body {
background: -webkit-linear-gradient(left, red 0%, red 50%, blue 50%,
blue 100%);
background: -moz-linear-gradient(left, red 0%, red 50%, blue 50%, blue
100%);
background: -ms-linear-gradient(left, red 0%, red 50%, blue 50%, blue
100%);
}
</style>

What is the expected result?

Background should have two equal sides red and blue with 50% width of every
side. IE10, FF20, SF5 show this expected result.

What happens instead?

Chrome adds some pixels to the left side (which is red) and these sides
became not equal. Width of tested screen is 1366px, but this bug is
reproduced with another resolutions. Width of "red side" is 697px, and
width of "blue side" is 669px, see attach, please.

Thank You.

Attachments:
google.png 49.8 KB

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

unread,

Apr 21, 2013, 5:53:14 PM4/21/13

to chromi...@chromium.org

Updates:
Labels: Cr-Blink-Rendering Cr-Internals-Skia

Comment #1 on issue 233879 by tk...@chromium.org: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

(No comment was entered for this change.)

chro...@googlecode.com

unread,

Apr 26, 2013, 6:17:00 AM4/26/13

to chromi...@chromium.org

Updates:
Cc: srsrid...@chromium.org
Labels: Needs-Feedback

Comment #2 on issue 233879 by srsrid...@chromium.org: Bug with
linear-gradient layout
http://code.google.com/p/chromium/issues/detail?id=233879

@grifang..: Opened the html file in chrome browser and observed that
different pixel values are showing each time I inspect the red and blue
element.

Can you please let me know how to get the exact pixel value of each block.

chro...@googlecode.com

unread,

Apr 26, 2013, 6:55:02 AM4/26/13

to chromi...@chromium.org

Comment #3 on issue 233879 by grifan...@gmail.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

I think that exact pixel value should be showing as another browsers layout
using the same css style.

chro...@googlecode.com

unread,

May 14, 2013, 6:03:49 PM5/14/13

to chromi...@chromium.org

Updates:
Status: Untriaged

Comment #4 on issue 233879 by song...@chromium.org: Bug with
linear-gradient layout
http://code.google.com/p/chromium/issues/detail?id=233879

With the above code, I'm able to reproduce the issue on Chrome
26.0.1410.64/ 29.0.1506.1 (Official Build 199649) canary Aura / Win7

chro...@googlecode.com

unread,

May 14, 2013, 6:04:49 PM5/14/13

to chromi...@chromium.org

Updates:
Labels: -Needs-Feedback

Comment #5 on issue 233879 by song...@chromium.org: Bug with
linear-gradient layout
http://code.google.com/p/chromium/issues/detail?id=233879

(No comment was entered for this change.)

chro...@googlecode.com

unread,

May 15, 2013, 10:16:51 AM5/15/13

to chromi...@chromium.org

Comment #6 on issue 233879 by r...@google.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

add repro case as a file

Attachments:
grad.html 355 bytes

chro...@googlecode.com

unread,

May 15, 2013, 10:17:51 AM5/15/13

to chromi...@chromium.org

Comment #7 on issue 233879 by r...@google.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

skia discretizes the colors into 256 levels for (lots of) speed. hard-edged
gradients like this (where there are two colors at the same color-stop)
definitely show up this limitation. We can look at ways to increase
precision, but there will be a real performance cost, so we have to decide
how important this particular behavior is in practice.

chro...@googlecode.com

unread,

Jul 11, 2013, 11:04:20 AM7/11/13

to chromi...@chromium.org

Comment #8 on issue 233879 by r...@nbsp.io: Bug with linear-gradient layout
http://code.google.com/p/chromium/issues/detail?id=233879

I was going to make a separate issue for this, however I believe it's the
same problem. Basically I've got a website that uses gradients to draw 1px
stripes down the side of the page, on top of a pinstripe background. The
effect, when it works looks fantastic.

However with the current gradient implementation the results are unusable:

http://youtu.be/cPctteQQWuQ

chro...@googlecode.com

unread,

Jul 11, 2013, 11:19:15 AM7/11/13

to chromi...@chromium.org

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

Comment #9 on issue 233879 by r...@google.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

(No comment was entered for this change.)

chro...@googlecode.com

unread,

Jun 4, 2014, 10:57:20 AM6/4/14

to chromi...@chromium.org

Comment #10 on issue 233879 by samel...@gmail.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

People are starting to use gradients as faux-column colouring - so accurate
positioning of hard colour transitions is important. e.g.
http://stackoverflow.com/posts/24039979/ see also
https://code.google.com/p/chromium/issues/detail?id=281489

chro...@googlecode.com

unread,

Jun 6, 2014, 5:57:36 AM6/6/14

to chromi...@chromium.org

Comment #11 on issue 233879 by samel...@gmail.com: Bug with linear-gradient
layout
http://code.google.com/p/chromium/issues/detail?id=233879

I have a test case to demonstrate the effect at
http://codepen.io/elliz/pen/fCsay - still an issue in latest chrome:
Version 35.0.1916.114 m

chro...@googlecode.com

unread,

Oct 30, 2014, 6:38:19 PM10/30/14

to chromi...@chromium.org

Comment #12 on issue 233879 by rose...@algonquinstudios.com: Bug with
linear-gradient layout
https://code.google.com/p/chromium/issues/detail?id=233879

Still an issue (Chrome 38), though I don't see the same problem in Firefox
nor Internet Explorer. Somehow they aren't suffering performance issues.

I made an example: http://codepen.io/aardrian/pen/pLDnz/

I also wrote up more detail:
http://blog.adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html

Animated screen shot of the effect.

Attachments:
Chrome_linear-gradient_bug_ani-reverse.gif 74.4 KB

chro...@googlecode.com

unread,

Oct 31, 2014, 8:27:38 AM10/31/14

to chromi...@chromium.org

Updates:
Owner: r...@google.com
Labels: -Pri-2 Pri-3

Comment #13 on issue 233879 by r...@google.com: Bug with linear-gradient
layout
https://code.google.com/p/chromium/issues/detail?id=233879

(No comment was entered for this change.)

chro...@googlecode.com

unread,

Jul 17, 2015, 8:28:35 AM7/17/15

to chromi...@chromium.org

Comment #15 on issue 233879 by samel...@gmail.com: Bug with linear-gradient
layout
https://code.google.com/p/chromium/issues/detail?id=233879

This is still an issue as of Chrome 43 - though the jumping seems to have
been reduced. Compare http://codepen.io/elliz/pen/fCsay in Chrome and other
browsers.

chro...@googlecode.com

unread,

Oct 7, 2015, 1:40:21 AM10/7/15

to chromi...@chromium.org

Updates:
Cc: rnimmaga...@chromium.org

Comment #17 on issue 233879 by me...@chromium.org: Bug with linear-gradient
layout
https://code.google.com/p/chromium/issues/detail?id=233879

Issue 516373 has been merged into this issue.

Reply all

Reply to author

Forward