Chrome on Android misaligns/cuts off select form-control-lg/form-control-sm

[dracos]

[I saw #23347 but thought this was different enough (doesn't affect text inputs, for one thing) that it might be solvable separately.]

When viewing a <select class="form-control form-control-lg"> on Chrome (60) on Android, the text is not vertically centred; it is too low and so the bottom can be cut off. It is also not vertically centred when using <select class="form-control form-control-sm">; this time it is too high. This can be seen by viewing the documentation page at https://getbootstrap.com/docs/4.0/components/forms/ on Chrome on Android, or in desktop Chrome by opening dev console and activating mobile mode, and looking at the select examples.
I've provided a screenshot of my phone looking at the docs here.

[andresgalante]

Hi! Is this the same issue as the one described here #23769 ?

[dracos]

No, I don't think so; I have no issue in that page on desktop Chrome, this is specifically in Chrome on Android and the 'small selects' in that issue are not misaligned, as they are on Chrome on Android.

[dracos]

Although, the "default' selects are misaligned in that issue, so maybe the only reason the 'small' is aligned okay is because all three text sizes are appearing slightly too big in that issue, on top of the issue I mention here.

[mdo]

Can you verify if this affects the custom selects, too? https://getbootstrap.com/docs/4.0/components/forms/#select-menu

[dracos]

• Firstly, the current v4-dev has a different height for form-control-lg, which fixes the overhang of lg. The docs are using the 4.0.0-beta tag, and the fix from $input-height-inner-lg should use $font-size-lg instead of `$font… #23150 was in the next dist update after that (the same day).

• adds a .custom-select-lg and makes .custom-select-sm use proper vars #20464 adds a custom-select-lg (though probably needs updating). A custom-select form-control-lg looks okay, but a custom-select form-control-sm is misaligned too high. But custom-select custom-select-sm is okay.

• As for the .form-control-sm on the examples page, I think I have narrowed this down to the use of .bd-example's 0.2rem top border. If there is one empty bd-example above a bd-example containing a form-control-sm, it is vertically centred okay, but if there are two then it is off by a pixel, so that seems like a rounding issue, trying to be too precise somewhere. I have made a CodePen at https://codepen.io/dracos/pen/aLJGLp which toggles between one and two bd-example and shows the issue in the select underneath when viewed on Chrome on Android.

[mdo]

Can y'all test out the changes in #24199?

[dracos]

The toggle codepen above still shows the 1px out issue at 100% zoom on Chrome here but not at other zooms, so I think this is a rounding error as suspected, not sure if there's anything to be done about that. That's all that remains of this I think, so feel free to close if that's not considered an issue :)