iOS浏览器(Chrome/Safari)滚动条因视频而闪烁

Question

在移动safari中，每当我点击包含HTML5视频的可滚动区域的边缘时，我都会注意到屏幕闪烁。此外，滚动似乎在不同的其他时刻闪烁。

我有一个codepen在这里复制这个问题-- https://codepen.io/anon/pen/ZxabYR

这是我的HTML：

<div class="item-content">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <video controls loop autoplay controlslist="nodownload" playsinline>
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.webm" type="video/webm">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.mp4" type="video/mp4">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.ogv" type="video/ogg"> 
  </video>
</div>

和CSS：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.item-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

我尝试过的东西：

当你碰到屏幕边缘时，

1. 尝试使用translate: transform3d和transform3d进行硬件加速，以禁用橡皮筋效果(我在这方面做得不成功-这是不可能的吗)。

任何想法都将不胜感激！

Answer 1

所以我用webkit - https://bugs.webkit.org/show_bug.cgi?id=184025填充了一个bug

一个临时的解决方案是用一个基于画布的视频播放器替换视频播放器--这是一个演示https://codepen.io/anon/pen/JLOGWE。这里有一大堆代码，但是通过使用这个https://github.com/Stanko/html-canvas-video-player示例，您可以像这样初始化一个canvas视频：

var canvasVideo = new CanvasVideoPlayer({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas'
});
canvasVideo.play();

这当然有它自己的问题，并且需要重新实现正常视频播放器所具有的一些基本功能。尽管如此，它在iOS上似乎相当稳定。