CSS Overflow hidden property is not working on touch devices - css

Question

I have created a circular vertical progress bar which fills vertically on page level progress. For this I have created two divs(outer div and inner div) and I have made the circular outer div using border radius 50% and overflow hidden and the inner div with square shape and width greater than the width of outer div. So on the completion of the page the height of the inner div increases and it gives the effect of filling of circular outer div as the edges of the inner div gets hide by the overflow property of the outer div. Its working fine in desktop and IPad but not in the other touch devices(mainly mobile devices). I am adding the snippet of the css and HTML that I am using. There are similar questions available on stackoverflow but none of the answer solved my problem, so plese don't take it as a duplicate answer, thanks.
#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

This appears to be caused by browsers parsing the tag. To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1">
original answer

Answer 2

Some things to note:
You don't need all these position: absolute;. Try to avoid them.
Decimal pixel values are highly discouraged
The width of your inner element was not correct. If your outer is 26px, and you want to move the inner two px left, that means you also need 2px on the other side, ending up at 30px
I tested the following and this works on my mobile devices
#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>