CSS Overflow hidden property is not working on touch devices

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>

You said that on the completion of the page the height of the inner div increases. Do you use JavaScript for this? If yes please also upload the code. (It was not possible for me to reproduce your problem..) — flosommerfeld, Jul 29 '17 at 08:55
@flosommerfeld Yes I update the progress using javascript but its not the problem of javascript as I just set its height using jquery's height() method. — Aashu.M, Jul 31 '17 at 09:24

score 1 · Answer 1 · answered Aug 15 '22 at 13:18

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

answered Aug 15 '22 at 13:18

saida lachgar

170
1
8

This works for me! Had iOS devices not hide overflow – Dragonsnap Sep 07 '22 at 10:53

score 0 · Answer 2 · answered Jul 29 '17 at 12:04

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>

thanks for the ans. I am using absolute position to set position of the inner div at the bottom of the outer div. And yes this is the main issue that this problem is not occurring on all touch devices maybe this issue is only related to mobile devices. — Aashu.M, Jul 31 '17 at 09:32

CSS Overflow hidden property is not working on touch devices

2 Answers2