.caret visually broken in IE11 when zooming

[Inspyro]

When using the non-minified version of the bootstrap.css you use a trick for ie8 and below by defining the .caret style like the following "border-top: 4px solid \9;". IE11 (in edge mode) won't understand this and therefore does not render the border at all - which makes the caret being rendered as broken in the middle.
When removing the space (between solid and \9) this does not happen - this is why with the minified version of bootstrap this works.

Please fix this in Bootstrap v3 and consider it for v4.

PS:
You could use a better solution instead of css hacks - see this stack overflow post:
http://stackoverflow.com/questions/814219/how-does-one-target-ie7-and-ie8-with-valid-css

[cvrebert]

@Inspyro Which exact version are you using? v3.3.5?

[cvrebert]

@Inspyro I can't reproduce with http://jsbin.com/lazivo/edit?html,output

With absurd zoom:

[Inspyro]

Hey, I just checked it again, with 100% zoom everything works as expected. But try the same example with 105% or 110% zoom in IE11 - it does not work anymore. However the minified version also works with zoom.

[cvrebert]

like the following "border-top: 4px solid \9;". IE11 (in edge mode) won't understand this

It's not supposed to understand that since that's supposed to be an IE8-specific hack.

[cvrebert]

try the same example with 105% or 110% zoom in IE11 - it does not work anymore

We don't really support zooming: http://getbootstrap.com/getting-started/#support-browser-zooming

[Inspyro]

Ok i understand. However in this case the fix is rather easy. you just need to remove the space between the "solid" and the "\9".

[fschmied]

See also #16203. IMO, even though zooming makes the issue visible (and zooming isn't really supported by Bootstrap), the issue should still be fixed. Essentially, IE 11 doesn't render the border-top of the caret because it considers the "solid \9" with a space to be invalid CSS (see screenshot of F12 toolbar below). It's more or less good luck that the caret works without a top border at 100% zoom.

Removing the space seems to be an easy fix.

[cvrebert]

Just removing the space is not the right fix. The \9 is there for the sole purpose of making that CSS property declaration only apply in IE8 (see http://browserhacks.com/#hack-ab1bcc7b3a6544c99260f7608f8e845e ).
But I can confirm that IE11 (but thankfully not Edge) is unexpectedly deeming solid\9 to be valid (even though it isn't), so we're going to need to tweak something somewhere. Maybe this is another wrinkle that clean-css needs to take into account.

[cvrebert]

Refs #16384, #16258

[theJian]

BTW, It also exits on Edge browser.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team