White line appears at end of gradient filled div at specific browser widths

Question

I have a div with id #gradient_div with a background-image set to linear-gradient. I'm getting a gap between the end of the linear-gradient and the end of the div #gradient_div only at certain browser window widths. As I stretch and shrink the browser window this white line disappears and reappears.

It seems like it has something to do with the margin:

• When I have the margin set to margin: 0 1%;, the while line appears at specific window widths.

  At 1% the white line appears whenever the window width ends in the range of 68-92 ex: 468px-492px, 568px-592px, 668px-692px, etc.

  For other margin left and right percentages, the line appears at these page widths:

  • 2% : page widths ending in the range 92-_04 and 42-54

  • 3% : page widths ending in the range 34-41, 67-74, and 00-08

  • 30%: page widths ending in 5 or 8

There is NO white line problem when I just set the background to a color as opposed to a gradient, ex background: blue; or when I set the background-image to an image; UPDATE It also doesn't happen when margin is set in px.

Suggestions to fix this are welcome but I'm mostly interested in understanding why this line is happening. What's causing this?

    #gradient_div{
    background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86) , rgb(152, 4, 228));
    height: 100px;
    margin: 0 1%;
    border: 1px solid black;
    }

<div id="gradient_div"></div>

Answer 1

I would increase the size of background a little to avoid this:

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: 101% 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

You can also try to add only 1px it will be probably less than 1%

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: calc(100% + 1px) 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>