Image border issue on mobile devices (chrome) when using ::before background image

Question

There are multiple places on our website where we are using .svg's with the background image rule to create shapes.

For example:

    &:before {
    bottom: auto;
    height: 4rem;
    content:'';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('img/layout/press-before.svg');
    background-size: 100%;
    background-repeat: no-repeat;

    @media screen and (max-width: $viewport-xs) {
        height: 2rem;
    }

    @media screen and (max-width: $viewport-sm) {
        top: -.1rem;
    }
}

This works well on desktop on all resolutions. But on several mobile devices using chrome there is an issue when the adjected block has the same color. There seems to be 1 or several pixels which are being interpolated incorrectly which leads to an edge of the underlying element showing.

Things I've tried: + use png, jpg instead of .svg to see if the problem relates to the rasterisation of .svg (problem persisted without difference) + moving the image up sligthly (line remained) + making it slightly larger (line remained)

For reference, see the following images.

issue example 1 issue example 2

Any suggestions are greatly appreciated!

Answer 1

The solution for me was to move the image up a little by adding top: -1px to the pseudo-element.

I tried this before I posted this question here and it didn't work. This was related to the fact that the parent of the pseudo element was using overflow-x: hidden and because of this the overflow-y was automatically also hidden (I'm adding this for anyone having a similar issue).

Of course this means I need to tweak the shape of the svg's a little because it has moved up 1px.