1px gap between divs on HiDPI display

Question

I've got a progress bar with a "fill" area and an image that caps the end of it. On Chrome 38, win8 with a hiDPI/retina screen, there's a 1px gap between the progress bar and the arrow image that caps the bar. It depends on where the bar is positioned, sometimes there's no gap. Is there any standard way to remove this gap?

Also, I'm using the css transition property to animate changes in width, and the gap seems to flicker during the transition.

<div class="progress">
    <div class="fill" style="width: 10%"></div><div class="arrow"></div>
</div>

.progress {
    width: 100%;
    background-color: lightgray;
    height: 20px;
}

.fill {
    display: inline-block;
    height: 20px;

    transition: width 1s;
    background: linear-gradient(to right, #d0d9d8 0%, rgb(237, 28, 36) 100%)
}

.arrow {
    display: inline-block;
    width: 10px;
    height: 20px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAUCAIAAADUTlA/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAaSURBVChTY3gro4IfjapARaMqUBE9VMioAABP/AK8RcGPowAAAABJRU5ErkJggg==")
}

take a look at this: http://css-tricks.com/snippets/css/cross-browser-inline-block/ — dippas, Oct 15 '14 at 15:51

score 2 · Accepted Answer · answered Oct 21 '14 at 15:07

My coworker's theory is that the issue is I'm using a percentage width which ends up being a fraction of a pixel, and if we could somehow round up/down the width to an exact pixel the gap wouldn't appear.

Anyways, my solution ended up being adding an extra line of pixels on the left edge of the image, and adding margin-left: -1px; to the arrow image so it covers the gap when it appears.

1px gap between divs on HiDPI display

1 Answers1