CODEWITHSUNDEEP
cssgoogle-chrome
Elle
Elle

Reputation: 3775

Chrome scrollbar overlapping div border by 1 pixel

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.

Upvotes: 9

Views: 9108

Answers (4)

LandWalker
LandWalker

Reputation: 1

You can configure scroll for your needs by this options:

.drop::-webkit-scrollbar {
  width: 12px;
}

.drop::-webkit-scrollbar-track {

}

.drop::-webkit-scrollbar-thumb {
  background-color: #d6d3d3;
  border-right: .5px solid orange;
}

Upvotes: 0

Pavel Aslanov
Pavel Aslanov

Reputation: 180

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

Upvotes: 1

jcubic
jcubic

Reputation: 66480

I had similar issue. I had div with scrollbar and border-right set to 2px and when I was resizing the window I had the scrollbar or don't in result I had 1px border when scrollbar was on and 2px when not.

I've fixed it by adding 3px border and setting:

overflow-y: scroll;

so the scrollbar is always visible and the border has always 2px visible width.

Upvotes: 0

Brittliff
Brittliff

Reputation: 66

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/

Upvotes: 2

Related Questions