Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hansmaad opened this Issue Nov 12, 2015 · 16 comments

Comments

Projects
None yet
8 participants
@hansmaad
Copy link

hansmaad commented Nov 12, 2015

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

image

image

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 cvrebert added css v3 labels Nov 12, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Nov 12, 2015

Unable to reproduce in Windows 10:
proof
@hansmaad What version of IE11 and Windows are you using?

@hansmaad

This comment has been minimized.

Copy link
Author

hansmaad commented Nov 12, 2015

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

@cvrebert cvrebert added browser bug and removed awaiting reply labels Nov 12, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Nov 12, 2015

@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

This comment has been minimized.

Copy link
Author

hansmaad commented Nov 12, 2015

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

This comment has been minimized.

Copy link
Member

XhmikosR commented Nov 12, 2015

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

@kkirsche

This comment has been minimized.

Copy link
Contributor

kkirsche commented Nov 12, 2015

@mrmlnc

This comment has been minimized.

Copy link

mrmlnc commented Nov 12, 2015

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

Edge
image

IE 11
image

@petetnt

This comment has been minimized.

Copy link
Contributor

petetnt commented Nov 13, 2015

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)

@EarthlingRich

This comment has been minimized.

Copy link

EarthlingRich commented Dec 1, 2015

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.

image

@cvrebert cvrebert added the confirmed label Jan 19, 2016

@cvrebert cvrebert added this to the v3.3.7 milestone Jan 20, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 20, 2016

Confirmed in Edge on Windows 10.

@cvrebert

This comment has been minimized.

cvrebert added a commit that referenced this issue Jan 20, 2016

Merge pull request #18945 from twbs/edge-bug-2263132
Add Wall of Browser Bugs entry for #18228

cvrebert added a commit that referenced this issue Jan 20, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 20, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 20, 2016

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

@petetnt

This comment has been minimized.

Copy link
Contributor

petetnt commented Jan 20, 2016

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

image

image

🔥

@cvrebert cvrebert added the v4 label Jan 20, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 20, 2016

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

@cvrebert cvrebert changed the title ul.nav-tabs border-bottom is visible on IE11 ul.nav-tabs border-bottom is visible on IE11+Edge Mar 27, 2016

@cvrebert cvrebert modified the milestones: v3.3.7, v3.3.8 Jul 25, 2016

@mdo mdo removed the v3 label Sep 5, 2016

@mdo mdo modified the milestone: v3.3.8 Sep 6, 2016

mdo added a commit that referenced this issue Dec 25, 2016

@mdo mdo added the has-pr label Dec 25, 2016

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Dec 25, 2016

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.

@mdo mdo closed this in #21429 Dec 25, 2016

mdo added a commit that referenced this issue Dec 25, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.