CSS background linear gradient bug using Chrome?

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
    );
}