Remove weird white space between nested divs on Chrome-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>