CODEWITHSUNDEEP
htmlcss
Andy Ray
Andy Ray

Reputation: 32066

border radius + overflow hidden + inner element (progress bar) makes jagged edge artifacts

I'm attempting to build a progress bar, fairly simple. I have a bar nested inside a tray. The tray has overflow: hidden and border-radius set on it.

jagged edge on progressbar

Here's the jsFiddle demonstrating the problem.

As you can see in the image, there is a jagged artifact on the left side of the progress bar. It appears the anti-aliased edge of the parent progress bar (dark background) is bleeding out. The desired behavior is that the bar/fill element is used for anti-aliasing the progress bar.

A brief solution I tried was absolutely positioning the inner div, but the progress bar needs to be able to animate from 0 to 1%, and that looks off without the overflow: hidden clipping.

I see this artifact both Chrome and Firefox so I don't immediately suspect it's a bug in Webkit.

I would also note this bug also affects Bootstrap's progress bars, but when the tray is a light color and the background is a light color, the artifact is much harder to spot.

Upvotes: 11

Views: 1915

Answers (2)

karns
karns

Reputation: 5847

Adding an extra wrapper helps mitigate your issues with 0 & 1%:

http://jsfiddle.net/p197qfcj/11/

HTML

<div class="outer-tray">
    <div class="tray">
        <div class="fill"></div>
    </div>
</div>

CSS

body {
    background: #ccc;
}
.tray {
  /* overflow: hidden; */
  height: 20px;
  background: #000;
  border-radius: 50px;
  height: 30px;
  width: 100%;
  border: none solid transparent;
  background-color: black;
}
.fill {
  background: #fff;
  width: 10%;
  border-radius: 100px;
  left: -1px;
  position: relative;
  float: left;
  box-sizing: border-box;
  border: 1px solid white;
  top: -1px;
  height: 32px;
}
.outer-tray {
    overflow: hidden;
  border-radius: 100px;
  overflow: hidden;
  display: block;
}

Upvotes: 3

chdltest
chdltest

Reputation: 873

EDIT: The only way I can think of is if you removed the overflow and applied a lower border-radius around the gray-progress which will slightly overlap the black.

http://jsfiddle.net/p197qfcj/7/

.tray {
    height: 20px;
    background: #000;
    border-radius: 100px;
    height:30px;
    width:90%;
}
.fill {
    background:#eee;
    width:10%;
    height:100%;
    border-radius: 12px; /* still occurs without this! */
}

Upvotes: 0

Related Questions