11

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.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • This thread might help, is problem of the browser, it shouldn't be rendering the pixels in that position: http://stackoverflow.com/questions/12423716/what-is-the-current-state-of-sub-pixel-accuracy-in-the-major-browsers – Matias Fernandez Martinez May 20 '15 at 00:01

2 Answers2

3

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;
}
Andy Ray
  • 30,372
  • 14
  • 101
  • 138
karns
  • 5,391
  • 8
  • 35
  • 57
  • As mentioned in the question, I need the progress bar to work at 0 and 1%. This solution does not allow for that – Andy Ray May 19 '15 at 23:53
  • Alright, my new solution should solve your issue. I updated it a couple times to polish it up. – karns May 20 '15 at 00:08
0

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! */
}
chdltest
  • 853
  • 2
  • 6
  • 18