Bug 184025 – iOS browsers (Chrome/Safari) scroll flickering due to video element

• Status: NEW
• Component: Layout and Rendering

[Parris]

Summary:
In mobile safari, I'm noticing screen flickering whenever I hit the edge of a scrollable area that contains an HTML5 video. In addition, scrolling seems to flicker at various other moments mainly centering around the video element

Steps to Reproduce:

Demo: 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;
}

Expected Results:
No flickering. The same result with images and other elements would be desirable.

Actual Results:
Flickering, jumpy/lagging scrolling.

Version/Build:
iOS 11.2.6, Safari 604?

Configuration:
Standard - this phone is pretty much just a factory reset

[Radar WebKit Bug Importer]

<rdar://problem/38885817>