Chrome gradients bug

by Walter Schwarz

HTML

On large screens, the vertical line of the gradient is obviously thinner then the horizontal one, allthough they both should be 1vw, which is why it does not overlap properly with the items behind it.
Seting the gradient 'to right' resolves the issue 
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <br />
</div>

CSS

.container {
    position: relative;
}
.item {
    width: calc(33.333333% - 1vw);
    height: calc(26.666666vh - 1vw);
    margin: 0 1vw 1vw 0;
    background-color: red;
    float: left;
}
br {
    clear: both;
}
.container::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% - 1vw);
    opacity: 0.5;
    background-color: #000;
    background-size: calc(33.333333% + 0.333vw) 26.666666vh;
    background-image: linear-gradient(to top, #CCC 1vw, rgba(0, 0, 0, 0) 1vw), linear-gradient(to left, #CCC 1vw, rgba(0, 0, 0, 0) 1vw);
    /*
    background-image: linear-gradient(to top, #CCC 1vw, rgba(0, 0, 0, 0) 1vw), linear-gradient(to right, #CCC 1vw, rgba(0, 0, 0, 0) 1vw);
    background-position: 0 0, -1vw 0;
    */
}