CSS background-color on edges

Question

I have a transparent .png image and I change the background color with css so i can use the same image with different colors.

This is a dummy image and the problem is with Chrome browser i get a line on top and bottom of that image when you zoom at certain points and on some smartphones like this:

It depends on page resolution I think. This problem is not reproducable with Firefox whatsoever.

Has anyone seen something like this? How can this be solved?
Here is an example, and try to zoom in with Chrome or open it with smartphone:

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
  background-clip: padding-box;
  background-clip: content-box;
}
/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }

<div class="panel-heading">Heading</div>
<div class="panel-body">
  <div class="row equal-col-height">
    <div class="col-xs-6 text-center">
      <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png">
    </div>
  </div>
</div>

update

The whole problem was actually seeing the background color on edges of the element like here Fiddle link you can reproduce it by opening the link on smartphone and try to zoom in. The background-color comes through the edges.

And the solution from Kosh Very solves the problem

Demo on fiddle

Answer 1

The problem is not caused by image itself, but by wrong subpixel rendering in some browsers.

The following code does the trick with the image in my Chrome 58.0.3029.110 (64-bit):

.vertical-center {
    position: relative;
    top: 50%;
    transform: translate3d(-1px,-50%,0);
    background-color: black;
    background-clip: content-box;
    display: block;
    border: solid 0.1px transparent;
}

/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }

<div class="panel-heading">Heading</div>
<div class="panel-body">
  <div class="row equal-col-height">
    <div class="col-xs-6 text-center">
      <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png">
    </div>
  </div>
</div>

Another part of the question was solving the similar problem with https://jsfiddle.net/5maqwgjg/2/ in SGS7 default browser (aka Samsung Internet). It can be solved adding background-clip:content-box; transform:scale(1.01); to .middle (https://jsfiddle.net/aw53wcg4/1/)