DaveE DaveE - 3 years ago 151
CSS Question

Remove 1px transparent space from CSS box-shadow in IE11?

I'm using CSS

box-shadow
to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.

Take this HTML:

<div class="wrapper">
<div class="widget">Test</div>
</div>


And this CSS:

.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}


In most browsers, the
widget
DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the
widget
DIV.

Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)

Things I've tried to remove the transparent space:


  • Changing the
    box-shadow
    from using
    em's
    to using
    px's

  • Adding or subtracting 1px from the other
    box-shadow
    attributes

  • Adding a border around the
    widget
    DIV

  • Adjusting the
    padding
    ,
    display
    ,
    position
    and other CSS elements for the widget

  • So many things I can't even remember right now



Any ideas how to remove the 1px transparent space in IE11?

Answer Source

Now that we know it's a bug, here's one acceptable workaround:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.

Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.

Checkout the fiddle here: http://jsfiddle.net/TVNZ2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download