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

Answer 2

我在 iOS 12 上尝试在 Safari 上安装 iPad WiFi 2017，一切都很好。你有没有机会用另一台录音设备录下这个故障？

编辑：一般外观清洁器-webkit-appearance: none 可能会解决问题。

Answer 3

我不得不采用包装器 div 和绝对位置的方法，例如：

HTML

<div class="wrapper">
    <video loop muted autoplay playsinline>
        <source src="./video.mp4" type="video/mp4">
        <source src="./video.webm" type="video/webm">
        <source src="./video.ogv" type="video/ogg">
    </video>
    <div class="video-ios-border-fix"></div>
</div>

CSS

.wrapper {
    display: block;
    position: relative;
    font-size: 0;
}

.video-ios-border-fix {
    position: absolute;
    z-index: 1;
    box-sizing: initial;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border: 4px solid #fff;
}

video {
    width: 100%;
}