实线性渐变在IE11上的表现不如预期

Question

我正在尝试创建一个大部分为白色的对角线背景，并使用SCSS / CSS在最后设置橙色条带。我在大多数使用线性渐变的浏览器上都有这个工作，但是像往常一样，IE搞砸了，表现得非常奇怪。

这是我正在做的事情以及随之而来的SCSS：https://codepen.io/WDACDavy/pen/eyzRgq

$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);
}

HTML正文只是一个<div class="slash"></div>元素。

这实际上在笔中工作，直到我检查它，然后它变得模糊。

Blurry gradient

有什么想法吗？

编辑：要清楚，上面的代码在Windows 7上的IE11中不起作用。它看起来像上面的示例图片中的模糊。如果您检查代码库，您将看到我的意思。