CSS linear-gradient displaying wrong color

Question

I'm trying to create a simple horizon striped background use linear-gradient and background-size, the first colour is displaying correctly, but the second colour #58a is displaying a 1px overlay mask in the left side

HTML:

<div></div>

CSS:

div {
    height: 100px;
    background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

Check the result in this link: https://codepen.io/migcoder/pen/BpOGdL

You may have to zoom-in the browser to see that 1px overlay mask clear.

The strange thing is that if I change the second colour to blue or red(probably more other colours), the problem is gone.

I tested this in Chrome, Firefox and Edge, they are all have same issue, is this a bug?

Answer 1

The body {margin:0} "works" because it removes the white lit pixel on the left. Lemme dive down deeper -

Each pixel in the monitor is built using vertical LED segments for red, green, blue. Red + green makes the yellow but fills only the first to segments of the pixel, while the blue fills only the last one.

It's easier to see in an illustration -

This represents a single pixel on the physical screen. The quality and physical separation depends on the quality of the cell as well as the physical size and resolution of the screen. The lower quality and/or lower resolution, the bigger the cell will appear - also optical influences such as glasses etc. will affect how the cells are perceived through things such as chromatic aberration and general distortion.

The white lit cells next to it can amplify the effect via increased contrast. Removing the margin so that the colored areas is next to dark color will reduce the effect. So basically, it's an optical phenomena (I guess you could call it an illusion, however, there is a actual real physical separation on the screen) due to how the pixel cell is built.

You can amplify the effect even further by using only red and blue colors (the result depends of course on the monitor etc. this is being watched):

 div { height: 100px; background: linear-gradient(#f00 0, #f00 50px, #00f 0px, #00f 100px); }

 <div></div>

If we now take a closer look at the actual physical screen showing the result from the code above:

we can see the separation more clearly (the image isn't the best, but hopefully good enough to illustrate; two lines with red, two with blue):

The pixels to the left represents white of course, and will, because of contrast make the unlit segment next to it (in this case the blue ones) more obvious and therefor increase the effect.

Answer 2

Your screen-shot does not feature any 1px overlay mask. Here's a magnified version of your own picture:

I'm pretty sure it's a mere optical illusion.

Answer 3

Add prefix for navigators

div {
  height: 100px;
  background: -webkit-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -o-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -moz-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}