Border radius on two corners causes visual glitch CSS

Question

The glitch:

How it should look

Edit: apparently the bar wasn't showing up on my example, so I updated it. Minimum example on StackBlitz

Github repo if StackBlitz not working

Sorry for the confusion, this is my minimum example and not my project.

You will see the glitch after about 4 seconds or so. The bar will just render some vertical piece on the left and then it glitches in and out.

Now, if you go into index.css/style.css in StackBlitz and change the styles from

.innerBar {
  ...

  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

to

.innerBar {
  ...

  border-radius: .25em;
}

it will render properly. However, if you look at index.css at the bottom I have a class for when the bar is full because I only want to round the right side corners when it's full.

I've tried messing around with the border radius on the outer div (the bar) and the inner div (the inner bar or slider). That's how I found out what was causing it.

Edit: I tried zooming in on my example only to notice that doing so removes the artifact. Upon restarting the bar growth at normal zoom I can see it again.

It renders correctly on Firefox but not on any Chrome browser I've tried. I need it to work on Chrome because I'm making an Electron app.

Answer 1

Just let the outer .bar do the rounded corners and hide any overflow. Then your .innerBar doesn’t need any rounded corners at all!

.bar {
  border-radius: .25em;
  overflow: hidden;
}
.innerBar {
  border-radius: 0;   /* this is the default value */
}