html - iPhone 上的 HTML5 视频元素有边框

Question

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

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

我正在使用 iphone 7 plus 和 ios safari。亲眼看看 - https:pathfinder-new.herokuapp.com

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

干杯，蒂姆

标签： htmlvideohtml5-video

Answer 1

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

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

从这个要点中获得灵感