ul.nav-tabs border-bottom is visible on IE11+Edge

[hansmaad]

http://getbootstrap.com/components/#nav-tabs

This has to be a known issue, because it's even visible on the doc site. But I can't find any report nor a workaround. Increasing the margin-bottom on .nav-tabs > li to -2px removes the line but does not look good either.

[cvrebert]

Unable to reproduce in Windows 10:

@hansmaad What version of IE11 and Windows are you using?

[hansmaad]

IE 11.0.9600.18059 on Win7. I will check this on other machines too.

[cvrebert]

@hansmaad Please also verify that IE's Zoom level is set to 100%.

Sauce only has IE 11.0.9600.17728 on Win7, which doesn't repro this.
@twbs/team Anyone have a Win7 box/VM to test this?

[hansmaad]

Zoom is 100%. The thickness of the visible part of the border changes with different zoom settings.
My colleague (same IE on win7) has this too.

[XhmikosR]

@cvrebert: sorry, I don't have IE 11 on my Windows 7 VM because it ignores conditionals and it pissed me off :P

[kkirsche]

@cvrebert can grab a VM from https://dev.windows.com/en-us/microsoft-edge/tools/vms/mac/ if no one has one

[mrmlnc]

Confirmed on Windows 10 Edge && IE without zoom. Resolution 1920x1080.

Edge

IE 11

[petetnt]

I can see it on Windows 8 IE11 when zoomed to 200% (and after zooming back 100% too). I recently wrestled with similar problem with IE (on non-Bootstrap related product) and the root cause was IE's High DPI scaling functionality (https://msdn.microsoft.com/en-us/library/dn265030%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396)

[NextNebula]

Confirmed with Windows 10 Edge v20 on a high DPI screen. Best visible on 200% zoom, but also visible on 175% zoom. Cannot reproduce in Chrome on a high DPI screen.

[cvrebert]

Confirmed in Edge on Windows 10.

[cvrebert]

Filed Edge/IE11 bug: https://connect.microsoft.com/IE/feedback/details/2263132/edge-ie11-subpixel-problem-with-transparent-borders

[cvrebert]

For whatever reason, this doesn't seem to affect v4 (http://v4-alpha.getbootstrap.com/components/navs/#tabs). (See subsequent comments)

[cvrebert]

@mdo Any interest in trying to figure out a workaround?

[petetnt]

@cvrebert v4, IE11, Windows 8, non-HDPI display, 100% zoom, first load:

🔥

[cvrebert]

@petetnt Huh. Window size or monitor resolution seems to be a factor, since v3 only reproduced for me when I had Edge's window maximized. Yet v4 didn't under the same conditions. Weird!

[mdo]

Fix in #21429. IE11 and Edge just don't like transparent here with whatever's happening with page rendering. Specific hex value works great though.