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

Question

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

我有一个代码笔在这里复制这个问题 - 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 和 视角。
2. 当你点击屏幕边缘时尝试禁用松紧带效果(我没有成功 - 这不可能吗？ 更多)。

任何想法将不胜感激!

Answer 1

所以我针对 webkit 填充了一个错误 - https://bugs.webkit.org/show_bug.cgi?id=184025

一个临时解决方案是用基于 Canvas 的视频播放器替换视频播放器 - 这是一个演示 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 上似乎相当稳定。