散焦时，为什么底部会有一些超标？

Question

在代码下方，转换时间为3毫秒，问题实际上并不明显。

body {
  background-color: Royalblue; /*#f0f0f0;*/
}

label {
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

.username {
  height:40px;
}
.password {
  height:40px;
  margin-top: 30%;
}

form {
  position: relative;  /* Parent relative */ 
  margin-top: 10%;
  margin-left: 41%;
  /*border: 1.5px solid black;*/
  width: 15%;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0; /* BORDER yes/no */
  border-bottom: 2px solid black; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 


label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 23px;
  border-radius: 2px;
  transition: transform .3s;
}

label::after{
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}

input:focus {
  border-radius: 2px;
}

input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1.3, 1);
  transition-timing-function: linear;
  top: -3px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em ;
  padding-left: 0px;
  transition: top .5s ease, font-size .5s ease; 
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -23px;
  font-size: 11px;
  padding-bottom: 15px; 
}


/*input:focus {
  outline: 1;
}*/

/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/
/* font-family: monospace;*/
 /*transform: translate3d(0, -80%, 0); */
 /* transition-timing-function: linear;*/

 <p class="head">Sign In</p>
<form>

    <div class="content"> 
     
      <div class="username">
         <input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
         <label class="user-label" for="user"><span>Username</span></label>
      </div>

    <!--  <div class="password">
         <input type="text" name="name" class="pass-input" id="pass" required />  
         <label class="pass-label" for="pass"><span>Password</span></label>
     </div>   -->

    </div>
  
</form>

但是将转换时间从label:after { transition: transform .3s;}更改为2秒，然后像 this 那样缩放。

为什么不对焦时底部会有一些超标？我试图调整top和input:focus + label::after中的label::after属性，以尝试对其进行修复，但无济于事。

Answer 1

这是我更改的内容：

input {
  height: 40px;
  margin-top: 0;
  box-sizing: border-box;
}

---

示例

body {
  background-color: Royalblue;
  /*#f0f0f0;*/
}

label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  z-index: -1;
  border: 0;
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

.username {
  height: 40px;
}

.password {
  height: 40px;
  margin-top: 30%;
}

form {
  position: relative;
  margin-top: 10%;
  margin-left: 41%;
  width: 15%;
}

input {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  background: transparent;
  border: 0;
  /* BORDER yes/no */
  border-bottom: 2px solid black;
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  //margin-top: 5px;
  /* new */
  height: 40px;
  margin-top: 0;
  box-sizing: border-box;
}

label::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 180px;
  height: 23px;
  border-radius: 2px;
  transition: transform .3s;
}

label::after {
  z-index: -1;
  background: beige;
  /*#a86bf;*/
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}

input:focus {
  border-radius: 2px;
}

input:focus+label::after,
input:valid+label::after {
  transform: scale3d(1, -1.3, 1);
  transition-timing-function: linear;
  top: -3px;
}

span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em;
  padding-left: 0px;
  transition: top .5s ease, font-size .5s ease;
  top: 0;
}

input:focus+label>span,
input:valid+label>span {
  top: -23px;
  font-size: 11px;
  padding-bottom: 15px;
}

<p class="head">Sign In</p>
<form>

  <div class="content">

    <div class="username">
      <input type="text" name="name" class="user-input" id="user" required />
      <!--input field-->
      <label class="user-label" for="user"><span>Username</span></label>
    </div>

    <!--  <div class="password">
         <input type="text" name="name" class="pass-input" id="pass" required />  
         <label class="pass-label" for="pass"><span>Password</span></label>
     </div>   -->

  </div>

</form>