Input group addons are misaligned/mismatched height

[troywarr]

Input group addons render at a mismatched height, or are horizontally misaligned with the adjacent input fields (such that a double border is visible). This appears to affect both the input-group-addon and input-group-btn classes, with various types of text/icon content within the addons.

To reproduce:

1. In Chrome/Mac v40.0.2214.111, visit http://getbootstrap.com/components/#input-groups
2. Scroll down to the examples under the "Basic example," "Sizing," "Button addons," "Buttons with dropdowns," or "Segmented buttons" headings

Results:

The examples in these sections shown misalignment in the addons. This occurs in my project as well (not just the Bootstrap docs), and the addons don't appear to be picking up any styling beyond what comes out of the box in Bootstrap.

This issue may be related to #10936, although that appears to concern Glyphicon content. This issue is not limited to that.

Screenshots:

[lukeberry99]

I'm not able to replicate this problem at all, also running Chrome 40.0.2214.111 on latest OSX

[cvrebert]

@troywarr Can you please confirm that your browser zoom level is at 100% (i.e. no zoom)?

[troywarr]

You're right! This does not appear to be a Bootstrap issue. Closing, and sorry for the hassle.

For posterity - this actually appears to be a Chrome zoom bug. Not sure if it's in vanilla Chrome, or caused by an extension I'm running.

From my experience, this type of inconsistent misalignment is usually caused by browser zoom. In fact, that was the first thing I tried - using Command 0 in Chrome to zoom to actual size. Turns out that, at least when I'm zoomed in to 110%, Chrome's "Actual Size" doesn't do anything! (Or at least not what I'd expect - return to 100%.) I had to zoom out to 100% using Command -.

I've been developing in zoom level 110% for who knows how long now. :-/

[cvrebert]

Yeah, as mentioned in our docs (http://getbootstrap.com/getting-started/#support-browser-zooming ), non-pinch browser page zooming breaks the Web generally, and Bootstrap doesn't attempt any heroics to try to support it.

[troywarr]

Definitely - and I think that's the only reasonable policy. 👍

Thanks for the help, and sorry again for the false alarm.

[orrd]

Just for the benefit of other people who may find this same issue happening even when they are at 100% zoom mode, there is an issue with Bootstrap SASS that will cause a very similar problem. See twbs/bootstrap-sass#409 for a solution involving setting the SASS precision.