CSS Overflow隐藏属性无法在触控设备

Question

我创建了一个圆形垂直进度条，它在页面级别进度上垂直填充。为此，我创建了两个div（外部div和内部div），并且我使用边框半径50％和溢出隐藏来制作圆形外部div，并且内部div的方形和宽度大于外部div的宽度。因此，在页面完成时，内部div的高度增加，并且当内部div的边缘被外部div的溢出属性隐藏时，它给出了填充圆形外部div的效果。它在台式机和iPad中运行良好，但在其他触摸设备（主要是移动设备）中却没有。我正在添加我正在使用的CSS和HTML的片段。 stackoverflow上有类似的问题，但没有一个答案解决了我的问题，所以请不要把它作为一个重复的答案，谢谢。

#progress-container {
  position: absolute;
  top: 100px;
  left: 100px;
}

#progress-indicator-outer {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #999999;
  overflow: hidden;
}

#progress-indicator-inner {
  position: absolute;
  bottom: 0px;
  width: 28px;
  height: 12.5px;
  margin: 0px 0 0 -2px;
  background: #007BAf;
}

<div id="progress-container">
  <div id="progress-indicator-outer">
    <div id="progress-indicator-inner"></div>
  </div>
</div>

Answer 1

有些注意事项：

• 你不需要所有这些位置：绝对;尽量避免它们。
• 强烈建议不要使用十进制像素值
• 内部元素的宽度不正确。如果你的外部是26px，并且你想要移动内部的两个px，那意味着你在另一边也需要2px，结果是30px
• 我测试了以下内容，这适用于我的移动设备

#progress-container {
  position: absolute;
  top: 100px;
  left: 100px;
}

#progress-indicator-outer {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #999999;
  overflow: hidden;
}

#progress-indicator-inner {
  position: relative;
  width: 30px;
  height: 13px;
  top: -2px;
  left: -2px;
  background: #007BAf;
}

<div id="progress-container">
  <div id="progress-indicator-outer">
    <div id="progress-indicator-inner"></div>
  </div>
</div>