Неожиданное поведение с переходом метки в активное состояние для ввода

Question

Почему на этикетке есть пробел, когда он left:0 и абсолютно позиционирован?

Попытка воссоздать интерфейс, похожий на дизайн материала. Я пытался использовать translateY(-6px) или что-то еще, но это не динамично для меток с большим количеством символов.

.formField {
  position: relative;
  height: 40px;
}

.form {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 24px) scale(1);
  transition: all .3s ease-in;
}

input {
  position: absolute;
  bottom: 0;
  left: 0;
}

input:focus+.label {
  transform: translate(0, 1.5px) scale(.75);
}

<div class="formField">
  <form class="form">
    <input type="text" class="name" />
    <label for="name" class="label">Hello</label>
  </form>
</div>

Answer 1

По умолчанию источником преобразования является «50% 50%», которое находится точно в центре любого данного элемента.

Попробуйте добавить transform-origin: bottom left; к вашему .label

.formField {
  position: relative;
  height: 40px;
}

.form {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: bottom left;
  transform: translate(0, 24px) scale(1);
  transition: all .3s ease-in;
}

input {
  position: absolute;
  bottom: 0;
  left: 0;
}

input:focus+.label {
  transform: translate(0, 1.5px) scale(.75);
}

<div class="formField">
  <form class="form">
    <input type="text" class="name" />
    <label for="name" class="label">Hello</label>
  </form>
</div>