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

Question

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 1

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/