Checkbox in 1px selection box is too high in Chrome if there are 7 or more options

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

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 1px white line at the bottom when you open the selection window.

Can this be fixed?

EDIT: Chrome Version 65.0.3325.146

EDIT 2: it depends on the screen resolution (tested on 1920x1080 and 1920x1200)

+5
source share
1 answer

I would say that this has something to do with screen shielding. I use a 2560x1440 resolution screen and see the problem on any number of parameters set in the selection box. When I drag it onto my 2736 x 1824 screen, I never see this white line below.

The latter is Surface Pro 4, which displays all the pixels in the native resolution of Win 10, displaying all the pixels "as it should be rendered."

I suspect that in some cases there may be a gap in different screen resolutions for this particular problem.

Looking at the comments, Andrey’s solution seems to be the best work for what you are trying to implement if the solution you make requires <select> and nothing but <select> .

Unfortunately, when it comes to rendering <select> elements, browser freedom is pretty high and runs from a level that is not controlled from the document. The reasons are various and irrelevant, but this is the current state of things. If you want to have full control over the way <select> displayed, you need to make fun of your behavior using other more controlled elements from the render point, such as <div> s, <span> or <ul> s. Or use a library that does the hard work for you, displaying easily stylish elements.

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

External 1440p monitar render

When used at my high resolution Surface Pro 4, the exact window (Chrome) looks like this without a white line at the end.

Surface Pro 4 render

I would say that a pixel-based solution on one screen can cause problems with another depending on the screen resolution.

+2
source

Source: https://habr.com/ru/post/1275784/


All Articles