CSS background linear gradient bug using Chrome? - css

Question

html {
background:#ffffff;
}
body {
height:250px;
background: linear-gradient(
to bottom,
#ffffff 0px,
#ffffff 100px,
#0065A2 100px,
#0065A2 145px,
#074A8B 145px,
#074A8B 163px,
#0065A2 163px,
#0065A2 203px,
transparent 203px
);
}
I am trying to use a background linear gradient and with great surprise it works good on Firefox and IE but not on Google Chrome.
The code is here for example: https://jsfiddle.net/be1rgpez/1/
background: linear-gradient(
to bottom,
#ffffff 0px,
#ffffff 100px,
#0065A2 100px,
#0065A2 145px,
#074A8B 145px,
#074A8B 163px,
#0065A2 163px,
#0065A2 203px,
transparent 203px
);
I need a linear gradient with several color stops, but using Google Chrome it renders a strange shadow between colors (see image left box). The effect I need is "striped" without shadows).
In the attachment I show what I see using Chrome. The left box is what I need but without the shadows (like in the right box). The same jsfiddle renders correctly on Firefox and IE.
UPDATE: this is a zoomed picture. As you can see, the left box has a small shadow between the white and the blue color (and also between other colors).

Answer 1

try this code:
.left {
background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}
.right {
background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}

Answer 2

I found that there's an issue between linear gradient and containers overflow.
I tried many solutions and it didn't work.
Then when i tried to give overflow:auto, it worked for me.
this is before i apply the fix to the right container which holds many content
this is after applying the overflow: auto !important; to the right container
and it works fine now without any issue and here it is.

Answer 3

You have defined the same starting points two times for different colors. The below code without the duplicates looks fine:
.left {
background: linear-gradient(
to bottom,
#ffffff 0px,
#0065A2 100px,
#074A8B 145px,
#0065A2 163px,
transparent 203px
);
}