title: Remove 1px transparent space from CSS box-shadow in IE11?
body: <p>I'm using CSS <code>box-shadow</code> to mimic a background that "bleeds" to the edges of the browser window.  It works great in Chrome, Firefox, Safari, and Internet Explorer 9 &amp; 10.  However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.</p>
  
  <p>Take this HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="widget"&gt;Test&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>In most browsers, the <code>widget</code> DIV has a white background and white left &amp; 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 <code>widget</code> DIV.</p>
  
  <p>Take a look at this fiddle for an example: <a href="http://jsfiddle.net/Bxsdd/">http://jsfiddle.net/Bxsdd/</a>. (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.)</p>
  
  <p>Things I've tried to remove the transparent space:</p>
  
  <ul>
  <li>Changing the <code>box-shadow</code> from using <code>em's</code> to using <code>px's</code></li>
  <li>Adding or subtracting 1px from the other <code>box-shadow</code> attributes</li>
  <li>Adding a border around the <code>widget</code> DIV</li>
  <li>Adjusting the <code>padding</code>, <code>display</code>, <code>position</code> and other CSS elements for the widget</li>
  <li>So many things I can't even remember right now </li>
  </ul>
  
  <p>Any ideas how to remove the 1px transparent space in IE11?</p>