CODEWITHSUNDEEP
cssgoogle-chromegradientlinear-gradients
webpaul
webpaul

Reputation: 156

CSS background linear gradient bug using Chrome?

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.

enter image description here

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

enter image description here

Upvotes: 0

Views: 3466

Answers (3)

Mostafa Mohamed
Mostafa Mohamed

Reputation: 29

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.

Upvotes: 1

Bal mukund kumar
Bal mukund kumar

Reputation: 363

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

Upvotes: 1

Gerard
Gerard

Reputation: 15786

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

Upvotes: 0

Related Questions