The upper border of the input disappears in the chrome windows

Question

code

<div class="center">
  <div class="parent">
    <label>姓名</label>
    <input type="text">
  </div>
</div>


.center {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.parent {
  padding: 8px 0;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

I want to know why the upper border of the entry disappears. It would be useful for me if someone answers me.

os: win10

browser: chrome 51.0.2704.84m

Thank.

Answer 1

The problem is due to transform: translate (-50%, -50%);

You can change your CSS to remove transform

.center {
   position: relative;
   width: 100%;
}
.parent {
   padding: 8px 0;
   margin: 15% auto;
   width: 100px;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

Answer 2

This is a graphical failure caused by your element being displayed on the subpixel using a translation transform (e.g. 10.5px or the like).

There are some well-known solutions to solve this problem, although I had no luck with them:

1) transform: transform: translate(-50%, -50%) perspective(1px);
2) .

.parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

, flexbox: https://philipwalton.imtqy.com/solved-by-flexbox/demos/vertical-centering/