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

Question

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

Closed this issue 8 years ago · 16 comments

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.

Answer 1 · 2015-11-12T07:30:05.000Z

Unable to reproduce in Windows 10:

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

Answer 2 · 2015-11-12T07:43:55.000Z

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

Answer 3 · 2015-11-12T08:04:18.000Z

@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?

Answer 4 · 2015-11-12T08:24:14.000Z

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.

Answer 5 · 2015-11-12T13:44:52.000Z

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

Answer 6 · 2015-11-12T14:26:24.000Z

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

Answer 7 · 2015-11-12T18:16:13.000Z

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

Edge

IE 11

Answer 8 · 2015-11-13T13:18:19.000Z

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)

Answer 9 · 2015-12-01T14:04:06.000Z

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.

Answer 10 · 2016-01-20T08:19:59.000Z

Confirmed in Edge on Windows 10.

Answer 11 · 2016-01-20T10:01:44.000Z

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

Answer 12 · 2016-01-20T10:19:44.000Z

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

Answer 13 · 2016-01-20T10:20:09.000Z

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

Answer 14 · 2016-01-20T10:24:56.000Z

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

🔥

Answer 15 · 2016-01-20T10:37:50.000Z

@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!

Answer 16 · 2016-12-25T08:30:24.000Z

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.