CSSオーバーフローの隠しプロパティがタッチデバイスで機能していません

Question

ページレベルの進行状況を縦に塗りつぶす円形の垂直方向の進行状況バーを作成しました。これに対して私は2つのdiv（outer divとinner div）を作成し、境界の半径50％を使用して円形の外側divを作成し、overflowを隠し、内側divを正方形と幅で外側divの幅より大きくしました。ページの完成時に、内側のdivの高さが増加し、内側のdivのエッジが外側のdivのオーバーフロープロパティによって隠れるように、円形の外側divの塗りつぶしの効果がもたらされます。デスクトップとIPadではうまく動作しますが、他のタッチデバイス（主にモバイルデバイス）では動作しません。私は使用しているCSSとHTMLのスニペットを追加しています。同様の質問がstackoverflowで利用可能ですが、答えのどれも私の問題を解決しなかったので、pleseは重複した回答、感謝としてそれを取らない。

#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で、あなたはまた、私は、次のテスト30px
• で終わる、他の側に2PX必要があることを意味左内側2つのピクセルを、移動したい、これが私のモバイルデバイス上で動作する場合

#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>