iPhone 上的 HTML5 视频元素有边框

Question

我最近一直在构建一个应用程序，并在开始时播放加载动画(只是一个 mp4 视频 - 出于审美目的)。除了在 Iphone 上，它在任何地方都很好用。

问题是一些视频周围有一条灰线 - 每边都不一样。如果我尝试截取页面，则线条不再可见。

我使用的是 iphone 7 plus 和 ios safari。要亲自查看 - https:pathfinder-new.herokuapp.com

目标是它与白色背景无缝衔接 - 示例可以在上面地址的桌面上看到。

干杯，提姆

Answer 1

我已经苦苦挣扎了几个小时，发现这是删除它的唯一方法(在 iOS 上的 Safari、Chrome 和 Firefox 上测试过):

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

灵感来自 this gist