无法消除Edge

Question

我有一个带有背景视频的容器，并且我正在通过将div绝对位于三角形底部的三角图像来创建div效果。

div的结构：

<div class="triangle">
     <img src="triangle.png" />
</div>

和CSS：

.triangle {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.triangle img {
  width: 100%
}

它可以正常工作，并且在Chrome，Firefox甚至IE11上看起来都很好，但是无论我做什么，Edge上都有一个像素透明的背景视频穿透。我尝试将图像向下移动几个像素，使其具有更高的z索引，添加，平移和定位多个白色伪元素以将其覆盖，但是Edge不会将这些元素显示为齐平或覆盖该行似乎可以通过任何方式进行。

有人知道这是什么原因或如何解决？

编辑：对不起，感恩节！

以下是所使用的PNG三角形的链接：https://res.cloudinary.com/dgeb3iekh/image/upload/v1542393468/new-slant_ga8nka.png

Here是一种Codepen，可在Edge中重现问题（无论如何对我来说都是如此）。