Проблема CSS в SAFARI: поле ввода OTP

Question

Я ввел поле ввода HTML для проверки OTP, оно абсолютно нормально работает в Chrome, но когда я открываю его в SAFARI, в правой части отображается дополнительный ввод.

Вот бегущий код: JSBIN

HTML-код:

<div id="otp-holder">
  <div id="otp-content">
    <input id="otp-input" type="tel" maxlength="6" pattern="\d{6}" autocomplete="off"/>
  </div>
</div>

CSS-код

#otp-input {
  padding: 0px;
  padding-left: 4px;
  letter-spacing: 24px;
  border: 0;
  background-image: linear-gradient(to left, #167ffc 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 33px 1px;
  background-repeat: repeat-x;
  background-position-x: 19px;
  width: 220px;
  min-width: 220px;
  margin-bottom: 0px;
}

#otp-content {
  left: 0;
  position: sticky;
}

#otp-holder {
  width: 190px;
  overflow: hidden
}

Пожалуйста, посмотрите на скриншот jsbin, когда открываете его вSAFARI

Здесь вы можете видеть, что я начал с ввода 1,2 ... 6 и, наконец, 1 дополнительное подчеркивание и 1-й ввод скрываются, когда я в последний раз достигаю.

Answer 1

Несколько незначительных обновлений вашего кода, и он работает нормально, пожалуйста, посмотрите на приведенный ниже рабочий фрагмент.

#otp-holder {
  width: 190px;
  overflow: hidden
}
#otp-content {
  left: 0;
  position: sticky;
}
#otp-input {
  padding: 0px;
  letter-spacing: 27px;
  border: 0;
  background-image: linear-gradient(to left, #167ffc 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 33px 1px;
  background-repeat: repeat-x;
  background-position-x: 19px;
  width: 100%; /* set width matching container width */
  margin-bottom: 0px;
}

<div id="otp-holder">
  <div id="otp-content">
    <input id="otp-input" type="tel" maxlength="6" pattern="\d{6}" autocomplete="off"/>
  </div>
</div>