CODEWITHSUNDEEP
cssretina-display
Angus
Angus

Reputation: 535

1px gap between divs on HiDPI display

http://jsfiddle.net/p959zse4/3/

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==")
}

Upvotes: 0

Views: 1279

Answers (1)

Angus
Angus

Reputation: 535

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.

Upvotes: 2

Related Questions