1

I'm tring to make a progress bar. Here is the code.

.outer {
  overflow: auto;
  width: 500px;
  height: 300px;
}
.inner {
  /*   Uncommmet next line, and the border-radius will disappear. */
  /*   height: 500px; */
}
.progress {
  width: 100%;
  border-radius: 40px;
  height: 80px;
  background-color: #f5f7fa;
  overflow: hidden;
}
.progress-basic {
  background-color: #3890ff;
  height: 100%;
  width: 100%;
  /*  Removing the opacity can fix this bug. But why? */
  opacity: 0.8;
}
<div class="outer">
  <div class="inner">
    <div class="progress">
      <div class="progress-basic">
      </div>
    </div>
  </div>
</div>

The div.progress has overflow:hidden and border-radius:40px. So the div.progress-basic should display as if it has border-radius.

So far everything is OK. But when the scroll bar shows in their parent element(which is div.outer in this case), the border-radius just disappears.

My Chrome version is 52.0.2743.116 (64-bit). I also test this bug in Safari and Firefox, there is no problem.

I find a strange solution for this bug. If I remove the opacity in .progress-basic, everything will work as expected. But I don't know why, and I really need the opacity.

Here is a codepen to show this bug. http://codepen.io/tanbowensg/pen/akZPEb

chirag
  • 1,761
  • 1
  • 17
  • 33
tanbowensg
  • 11
  • 3
  • i have the same chrome version. i removed the comment lines and it still works – Mihai T Aug 29 '16 at 10:43
  • It works for me as well. May be you should try clearing your browser cache and check once. – San Aug 29 '16 at 10:47
  • Hello, thank you for answering the question. There is some problem with the example I provide above. Actually, I find the condition to reproduce this problem is very strict. I make a new demo here: http://codepen.io/tanbowensg/pen/qaWdgp I'm not sure whether it is a bug or it is designed to behave like this. – tanbowensg Aug 30 '16 at 02:58

1 Answers1

0

The border-radius is still being applied to the parent .progress, but the inner .progress-basic is showing over it. For some reason with the opacity set it thinks it needs to render outside of its parent's border-radius (it's filling the entire rectangular area).

See this codepen: http://codepen.io/anon/pen/vXBYRo

I changed the background-color of .progress so that you can see it actually is there underneath. The only workaround I found is to give .progress-basic the same border-radius as its parent. You can uncomment the border-radius: inherit; so that the inner <div> always gets the parent border-radius.

skyline3000
  • 7,639
  • 2
  • 24
  • 33
  • Thank you for your help. Now I know why it happens. But I still think chrome has a problem with it. I'm not sure it is a bug, or just a different behavior with other browsers. To prove my opinion, I make a new demo. I add `mix-blend-mode: multiply` to `.progress-basic`. You can see the new demo and how to reproduce the bug here: http://codepen.io/tanbowensg/pen/qaWdgp. – tanbowensg Aug 30 '16 at 02:51
  • I'm not sure it's a bug or if it's just the way that Chrome has decided to implement this. Check out this JSFiddle which doesn't have a scrollbar: https://jsfiddle.net/zL0nnxa7/ . The behavior is the same. The corners of the child `div` are filled even though it is contained within a parent that has a `border-radius`. This question http://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css leads me to believe it has to do with `overflow` only. – skyline3000 Aug 30 '16 at 13:17
  • If no overflow is set, the inner `div` simply renders outside of the curved area. If you set `overflow:hidden`, it will be trimmed correctly to the curved area as you desire. But your demo has other overflow behavior needed for the scrollbar, so it falls into the first case where the corners will be rendered outside of the curves. – skyline3000 Aug 30 '16 at 13:18