CSS background color around the edges

Question

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

This is a dummy image, and the problem is in the Chrome browser. I get a line at the top and bottom of this image when scaling at certain points and on some smartphones, such as:

It depends on the resolution of the page, I think. This issue does not reproduce with Firefox at all.

Has anyone seen something like this? How can this be solved?
Here is an example and try to zoom in using Chrome or open it using a 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>

Run codeHide result

Update

, , Fiddle, , . .

Kosh Very

Answer 1

, .

Chrome 58.0.3029.110 (64-):

.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>

Hide result

https://jsfiddle.net/5maqwgjg/2/ SGS7 ( Samsung Internet). , background-clip:content-box; transform:scale(1.01); .middle (https://jsfiddle.net/aw53wcg4/1/)

Answer 2

vertical-align: middle .

, display: block. inline-block.

, , vertical-align: top vertical-align: bottom CSS.

SO, . .