css - Css calc が IE11 で線形グラデーションで機能しない

Question

*{
  margin:0; padding: 0;
}
body {
 background-color: orangered;
}
.content {
  margin-top: 200px;
  height: 100vh;
  background-color: #fdfdff;
}
.tilt {
  position: relative;
}
.tilt:before {
  content: '';
    padding-top: 8.74887%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);
}

<div class="content tilt">

</div>

IE11 では calc() css プロパティを理解するのに問題があるようです。

私はこのように線形勾配で calc を使用しています:

background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);

しかし、これを次のように使用すると：

background-image: linear-gradient(5deg, #fdfdff, transparent 50%);

問題なく動作します。

そして、もう一つわからないことがあります。IE11でそのプロパティを調べると、オフにしてから再びオンにすると機能します。

calc(50% - 1px) を使用することの要点は、角度がより滑らかに見えることです。

助言がありますか？