Chrome scrollbar overlapping div border by 1 pixel

Question

In Chrome 33.0.1750.146 m, when a div with a 1-pixel border and a scrollbar has fractional pixel width (where the fractional part is >= 0.5) inside another div with a percentage width (< 100%), the right side of the border is sometimes hidden, depending on rounding. This seems to happen because the scrollbar's position and the right side of the div are rounded in different directions, causing the scrollbar to overlap the right side of the div by one pixel.

Is this a known bug or is there a workaround? I'm experiencing this graphical glitch inside a PhpBB template page, where the content is centered and widths are automatically calculated which has resulted in a ---.5px width div, and I've traced it down to the following minimum reproducible sample:

HTML:

<div id="wrapper">
    <div class="box">
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
        <p>Test content</p>
    </div>
</div>

CSS:

.box {
    height: 100px;
    overflow: auto;
    border: 1px solid;
}

#wrapper {
    max-width: 75%;
    margin: auto;
}

Example JSFiddle — resize the window and observe the right border flicker/appear/disappear.

Answer 1

EDIT: As pointed out by Rohrbs below, my original answer doesn't seem to work! A possible solution seems to be removing the border entirely and adding box-shadow: 0 0 0 1px #000;. Depending on your browser support requirements this could help achieve what you need.

Replacing margin: auto; with padding: 0 12.5%; on #wrapper seems to fix this. Not sure how important having that margin auto is for your specific case.

http://jsfiddle.net/zHh4c/7/

Answer 2

Move the border to a parent "div" and it will work.