Linear gradient not covering whole image (leaves ~1px border)

I've got css background image with linear gradient over it.

CSS code:

.footer-about {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25rem;
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1),
        rgba(60, 99, 142, 0.55)
      ),
      url('assets/img/Fanpage.png');
    background-size: cover;
    background-position: 0 0;

    > span {...}
    > a { 
       ... 
       > svg {
          ...
       }
    }

HTML:

<div class="footer-about">
   <span>Follow Us</span>
   <a href="...facebook..." target="_blank><svg>...Facebook icon...</svg></a>
</div>

Here's how it renders in Chrome but only on particular browser zoom level (1,25). Look at the top of the image, under "Full white".

Background position set to 0 0:

Background position set to 0 20%:

Background position set to 0 50%:

Background position set to 0 100%:

I discovered that when the background position is set to 0 0 there is no border, but when I set it to for example 0 50% border appears. The more percent the more visible is the border (but still very thin). On 10% its almost invisible, on 100% its like image without gradient. I also noticed that specifying background-position in pixels (0 20px for example) moves gradient AND background but specifying it in percentages (0 50% for example) moves only background and creates this thin border.

Removing background-size: cover doesn't change anything.

Any ideas how to get rid of this thin border which appears not to be covered by linear-gradient?

I've also noticed those small borders in other places of the blog I'm building but this is definitely the most annoying one. And Chrome is weird - everything is fine on Firefox