htmlcsssass

Small gap between background-color of div and background-color of div:after


I have a html tag inside of another, and have given the inside html-tag a linear gradient background. I would like to fill the gap between the inner div tag, and the container-div with the darkest shade of the gradient. The solution I've implemented works, but on some computers there is a small gap between the container:after background and the container linear-gradient background. Have anyone else encountered anything like this?

<div class="image-wrapper">
  <div class="container">

  </div>
</div>

CSS:

.image-wrapper {
   width: 200px;
   height: 100px;
   background-color: white;
}

.container {
   height: 100px;
   position: relative;
   max-width: 100px;
   left: 75px;
   background: linear-gradient(to right,rgba(45,51,64,.6),transparent 75%);
}

.container:after {
   content: '';
   position: absolute;
   top: 0px;
   right: 100px;
   width: 20%;
   height: 100px;
   background: rgba(45,51,64,.6);
 }

Heres a fiddle of the code: /03L4ub4r/1/

This fiddle does not reproduce the issue to me, nor am I able to reproduce it on my own computer.

Moving the after-tag in developer tools by 1px in either direction makes either a bigger gap or overlaps with the other background.

This is what the bug looks like: http://postimg.org/image/yvgdtwuzb/a0499505/

This is what a 1 pixel self generated gap looks like on my computer: http://postimg.org/image/rbeamjo4f/a73784a1/

It might look like the linear-gradient adds a 1px border with a lower opacity than what is specified. Has anyone experienced any bugs with linear-gradients like this?


Solution

  • I never did find out why the bug was occuring, but solved the issue in another way. Making the gradient go from the middle of the div tag, and then extend until it fills the whole screen, stopping the gradient part at roughly the width of the inner div. By doing so, the area outside the inner div tag would be filled with the darkest shade of the gradient.

    .container:before {
       content: '';
       position: absolute;
       top: 0px;
       right: 50%;
       width: 200%;
       height: 100px;
       background: linear-gradient(to left,transparent 0,rgba(45,51,64,.6) 600px);
     }