Bootstrap: Select adds height to card body in Chrome

[seveves]

When hovering over a select that is placed in a card's card-header then the height of the corresponding card-body increases. The problem only occurs in my Chrome browser in version 62.0.3202.94. The problem does not occur in Firefox 58.0b8 (64-Bit). I'm running Windows 10 and I'm using bootstrap v4 beta2 as you can see in the attached codepen.

I've added an example to codepen:
https://codepen.io/seveves/pen/XzQXYP?editors=1000

[andresgalante]

Hi @seveves this is a super strange bug, it seems to be in Chrome to me.

It's trigger by the h-100 class on card. It'd be great to reduce this codepen down to exactly what's needed to show the bug and report it to Chrome. what do you think?

also consider using d-flex justify-content-between on the header instead of the ml-auto, removing d-flex from row since row is already flexed and a general clean up of utility classes.

[seveves]

@andresgalante https://codepen.io/seveves/pen/MORjNB
I also sent a bug report via Chrome.
A workaround could be to remove the text-decoration: none; from the select on :hover

[andresgalante]

👍 thanks a lot!

[seveves]

imho we can close this issue because it is not related to bootstrap

For your information:
https://bugs.chromium.org/p/chromium/issues/detail?id=792344

[Johann-S]

we can at least add it to our wall of browser bugs

[mdo]

Closing this out since it's an old issue, not a Bootstrap bug, and the .custom-select has been heavily redone in v5 so that it shouldn't impact things here.