SAFARI中的CSS问题：OTP输入字段

Question

我已经实现了用于OTP验证的HTML输入字段，它在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
}

在SAFARI中打开jsbin时，请查看其屏幕截图

在这里您可以看到我是从输入1,2 ... 6开始的，当我到达最后时，最后还有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>