title: Solid Linear Gradient not behaving as expected on IE11
body: <p>I am trying to create a diagonal background that is mostly white and has an orange strip on the end using SCSS / CSS. I have this working on most browsers using linear-gradient, but as always, IE is messing up and behaving weirdly.</p>
  
  <p>Here's a pen of what I'm doing and the SCSS that goes with it: <a href="https://codepen.io/WDACDavy/pen/eyzRgq" rel="nofollow noreferrer">https://codepen.io/WDACDavy/pen/eyzRgq</a></p>
  
  <pre><code>$orange: #f25b2e;
  $white: #FFFFFF;
  body {
    background: #EEEEEE;
  }
  .slash {
    width: 100%;
    height: 500px;
    background: linear-gradient(162deg, $white 0%, $white calc(50% - 5px), $orange calc(50% - 4px), $orange calc(50% + 4px), transparent calc(50% + 5px), transparent);
  }
  </code></pre>
  
  <p>The HTML body is simply a <code>&lt;div class="slash"&gt;&lt;/div&gt;</code> element.</p>
  
  <p>This actually WORKS in the pen until I inspect it, then it gets all blurry.</p>
  
  <p><a href="https://i.stack.imgur.com/ppz49.png" rel="nofollow noreferrer">Blurry gradient</a></p>
  
  <p>Any ideas?</p>
  
  <p>EDIT: To be clear, the above code is NOT working in IE11 on Windows 7. It appears blurry like in the example picture above. If you inspect the codepen you will see what I mean.</p>