Zigzag Border CSS - 显示FireFox和Chrome中的问题

Question

我正在为div添加一个简单的锯齿形边框，并注意到Chrome和Firefox上存在一些奇怪的显示问题。最值得注意的是FireFox。

这是我的代码：

section#interview:after {
    background: linear-gradient(-45deg, #FF7171 16px, transparent 0),linear-gradient(45deg, #FF7171 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    top: -26px;
    left: 0;
    width: 100%;
    height: 32px;
}

我还在这里设置了一个基本的小提琴：https://jsfiddle.net/3fyn2a6q/1/

在观看FireFox中的小提琴时，我看到锯齿形周围有一个微弱的灰色轮廓（见下图）。这在Chrome上不可见。

火狐：

在Chrome上我有不同的问题。调整浏览器窗口大小时，我看到边框上方有一条淡红线。如果我按top向上或向下调整1px行。如果我再调整一下它会再次出现。我只是没有得到它。见下图：

Chrome：

我错过了我的CSS吗？我真的不想使用重复的图像而不是纯粹的css（它是2017年！）。