.form-control height calculation inconsistent

Problem

Okay, I’m not sure how many people have noticed this behaviour with the .form-control regardless of input type. A decision was made in Bootstrap 4.1.3 to add a fixed height to the .form-control to compensate for differences in computed height across different types (see: https://github.com/twbs/bootstrap/issues/26867), however for me, in most cases the calculation appears to be slightly “off”. It can be most identified with the Email Address field in the Forms component, see: https://getbootstrap.com/docs/4.1/components/forms/#overview

Reproduce

If you inspect the element and simply take off: height: calc(2.25rem + 2px); you’ll see the placeholder text move slightly up and becoming more visually cantered (I picked up on this small thing 😄 )

Still can’t see it? I’ve made a simple illustration (excuse the design skills here, I used paint.net)

A = current code and markup found on https://getbootstrap.com/docs/4.1/components/forms/#overview as discussed above.

B = I removed the height: calc(2.25rem + 2px); from my browser.

You’ll see that in the first input (A) there is slightly more spacing between the red line that I’ve added compared to the top of the placeholder text that compared to B which is visually more centred.

Suggestions

I assume that this calculation has come from somewhere, however, I have consistently had this marginal problem on Macbook Safari, Chrome, Windows Chrome and Firefox. I was hoping of some SASS variable that I could edit to overwrite it in my code but couldn’t find one. In fact, more often that not I find myself writing something like the following since 4.1.3:

.form-control {
  height: auto !important;
}

I’d also be curious to know who else is experiencing this and what can be done? 🚀

[alainbelez]

this is more visible when you have an input-group-append after the input tag, see zoomed image below:

[myplaneticket]

I am having the same issue, but the height: auto makes things misaligned in IE…