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

IE11 shows some kinda of emboss in panel-primary #16671

Closed
Khrysller opened this Issue Jun 18, 2015 · 9 comments

Comments

Projects
None yet
5 participants
@Khrysller
Copy link

commented Jun 18, 2015

Windows 8, IE 11:

panel

In Chrome it is flat. Shouldn't be flat in IE 11 too?

@Khrysller Khrysller changed the title IE11 show some kinda of emboss in panel-primary IE11 shows some kinda of emboss in panel-primary Jun 18, 2015

@mdo

This comment has been minimized.

Copy link
Member

commented Jun 18, 2015

That's not any CSS bug, it's a rendering issue I believe. Looks like the background is bleeding through for some reason. Are you zoomed in or out at all?

@Khrysller

This comment has been minimized.

Copy link
Author

commented Jun 18, 2015

No zoom. I tried with different zoom, to see the results. All the same. Just tested in a IE9 on Windows 7 and the result is the same as Chrome, flat, without the "emboss".

@coliff

This comment has been minimized.

Copy link
Contributor

commented Jun 23, 2015

I've just been looking into this issue on IE11 on Windows 8.1. It is a bit jarring once you notice it.

Using the F12 DOM Explorer devtool and then turning off both 'border-top-left-radius:3px' and 'border-top-right-radius:3px' from .panel-heading fixes the issue and all the example panel headings looks great with no 1 pixel white inner border.

@cvrebert cvrebert added the confirmed label Jun 23, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jun 23, 2015

Confirmed in Win 8.1 IE 11.0.9600.17801 on Sauce Labs.

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jun 23, 2015

The bug does not repro in Win 8 IE10 on Sauce Labs.

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jun 23, 2015

Looks like the background is bleeding through for some reason.

Confirmed that this is what's happening. Changing the background-color of the .panel changes the color of the bleed line.

@cvrebert cvrebert added this to the v3.3.6 milestone Jun 23, 2015

cvrebert added a commit that referenced this issue Jun 23, 2015

cvrebert added a commit that referenced this issue Jun 23, 2015

Merge pull request #16689 from twbs/ie-border-radius
Add Wall of Browser Bugs entry for #16671

@mdo mdo referenced this issue Jun 23, 2015

Closed

v3.3.6 ship list #16644

@jonathansampson

This comment has been minimized.

Copy link
Contributor

commented Jun 25, 2015

Confirming on behalf of the IE team that we see the issue in both Internet Explorer and Microsoft Edge. As @coliff stated above, turning off the border-radius values on .panel-heading resolves the issue. I'm assuming that this is related to sub-pixel precision as slowly increasing the width of the window causes the 1px gap to manifest itself every-other-pixel.

I've created a repro of this, confirming that the issue is a combination of a sized-width containing element, and the overall width of the window. Note the override of the second panel's rounded corners.

cvrebert added a commit that referenced this issue Jun 25, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jun 25, 2015

@jonathansampson Thanks! IE Team's responsiveness is greatly appreciated.

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.