select option box is 1px too high in Chrome when there are 7 or more options

Question

Try this in Chrome (in Firefox it works without problems):

opened box is perfect size with 6 or fewer options
<br>
<select>
    <option style="background-color:red">red</option>
    <option style="background-color:green">green</option>
    <option style="background-color:blue">blue</option>
    <option style="background-color:cyan">cyan</option>
    <option style="background-color:yellow">yellow</option>
    <option style="background-color:magenta">magenta</option>
</select>
<br>
opened box is 1px too high with 7 or more options
<br>
<select>
    <option style="background-color:red">red</option>
    <option style="background-color:green">green</option>
    <option style="background-color:blue">blue</option>
    <option style="background-color:cyan">cyan</option>
    <option style="background-color:yellow">yellow</option>
    <option style="background-color:magenta">magenta</option>
    <option style="background-color:gray">gray</option>
    <!-- here is 1px white when opened -->
</select>

You will notice a white line of 1px at the bottem when you open the select box.

Can this be fixed?

EDIT: Chrome Version 65.0.3325.146

EDIT 2: it appears to depend on screen resolution (tested on 1920x1080 and 1920x1200)

Answer 1

I would say this has something to do with screen scaling. I'm using a 2560x1440 resolution screen and can see the issue on any number of options set in the Selection Box. When I drag it down to my 2736 x 1824 screen, I never see that line of white at the bottom.

The latter one is a Surface Pro 4 which renders all pixels in Win 10 native resolution rendering all pixels "as it's meant to be rendered".

I'm suspecting that there might be a gap in certain cases on different screen resolutions for this particular issue.

Looking onto the comments, Andrei's solution seems like the best work-around for what you are trying to accomplish if the solution you're making isn't demanding <select> and nothing but a <select>.

Unfortunately, when it comes to rendering <select> elements, browser liberty is quite high and it's done from a level that's not controllable from Document. The reasons are various and irrelevant, but this is the current state of things. If you want complete control over how <select>s are rendered, you need to mock their behavior using other more controllable elements from a rendering point of view, such as <div>s, <span>s or <ul>s. Or use a library that does the heavy-lifting for you, displaying easily style-able elements.

This is from my external monitor with the white line at the bottom

When using it on my higher resolution Surface Pro 4, the exact same window (Chrome) looks like this without the white line in the end.

I would say, that a pixel-fix solution on one screen, might cause issues on another depending on the screen resolution.