CSS background-color on edges - html

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/)

Answer 2

Images automatically have vertical-align: middle and that creates the gaps on the edges.
You can make the image a block element to remove the space with display: block. They are by default inline-block.
If you don't want the image to be a block element, add vertical-align: top or vertical-align: bottom to the image element with CSS.
Here is a reference to another SO question, but the accepted answer isn't a perfect solution. Read the others for more ideas.
Remove white space below image