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
Closed

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

Khrysller opened this issue Jun 18, 2015 · 9 comments

Comments

@Khrysller
Copy link

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
Copy link
Member

mdo 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
Copy link
Author

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
Copy link
Contributor

coliff 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
Copy link
Collaborator

Confirmed in Win 8.1 IE 11.0.9600.17801 on Sauce Labs.

@cvrebert
Copy link
Collaborator

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

@cvrebert
Copy link
Collaborator

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
Add Wall of Browser Bugs entry for #16671
@mdo mdo mentioned this issue Jun 23, 2015
@jonathansampson
Copy link
Contributor

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
Copy link
Collaborator

@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
Projects
None yet
Development

No branches or pull requests

5 participants