关于输入框顶部边框在Windows chrome中消失的问题

这是我在写登陆框时发现的问题，我发现输入框的上边框好像消失了一样

image

然后经过在网上的查找，终于找到了原因

原因是因为变换：translate（-50％， - 50％）;，这好像是windows chrome的一个bug

在我把这句话去除之后就发现输入框恢复了正常的样子，但是去掉这句话之后原先的定位居中就会消失了

那么我们如何在不删除translate（-50％， - 50％）的情况下，让输入框的上边框出现呢？

我们可以为输入框添加一个上边框

.input input[type=text]{
  width:100%;
  padding: 10px 10px 10px 23px;
  outline:none;
  border: 1px solid #aaa;
}

还可以使用transform: transform: translate(-50%, -50%) perspective(1px);来让边框出现

或者在父元素上面添加

 -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

参考自：https://stackoverflow.com/questions/42151075/input-top-border-disappears-in-windows-chrome