我有一个带有图像遮罩的滑块，在Firefox和Chrome（已连接）中可以正常工作

position: absolute;
bottom: -150px;
width: 800px;
left: 50%;
transform: translateX(-50%);
z-index: 5;

-webkit-mask-image: url(assets/svg/mask.svg);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(assets/svg/mask.svg);
mask-size: 100%;
mask-repeat: no-repeat;

但是当我在Edge中打开页面时，我根本看不到该元素。 我尝试将蒙版切换为PNG文件，但是没有运气。我以为可能是滑块故障，但是即使我将div的内容切换为空白的黑色元素（在Firefox和chrome中也可以使用），在Edge中仍然没有任何结果。

如果我划掉了“ mask-image”属性，则滑块会出现在屏幕上并且工作正常。

这是演示： http://box5602.temp.domains/~ednahous/

我还有一个网站在视频上方带有图像遮罩，并且在Edge中可以正常工作...所以我真的不知道是什么原因引起了这个问题。