Remove weird white space between nested divs on Chrome - html

Question

How can you remove the weird white space between two nested divs on Chrome.
<div class="bar">
<div class="progress">
</div>
</div>
.bar {
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
}
.progress {
height: 100%;
width: 50%;
background: black;
}
Here is the link to the fiddle: http://jsfiddle.net/hfob7yz4/1/.
On Chrome it looks like
this for me with the weird margin.
On Firefox it looks pretty normal like expected:
firefox-img
It also depends on the screen width. The problem only shows up on my laptop.
Thanks

Answer 1

The reason is that there is a border around the main div, and gets visible on some screens
to avoid this add
.bar {
box-sizing: border-box;
}
read more here

Answer 2

You are hitting a sort of edge effect when on different zoom levels - there are bits of pixel 'left behind' in the system's calculations as it tries to map part CSS pixels to the several screen pixels that might make up a CSS pixel on modern screens.
Instead of needing a second, inner div, you could paint the progress with a background image using a linear-gradient - this can be altered by JS dynamically as required.
.bar {
--progress: 50%;
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}
}
<div class="bar">
</div>