[Webkit-unassigned] [Bug 184025] New: iOS browsers (Chrome/Safari) scroll flickering due to video element

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=184025

            Bug ID: 184025
           Summary: iOS browsers (Chrome/Safari) scroll flickering due to
                    video element
           Product: WebKit
           Version: Safari 11
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: parris at letswoosh.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180326/1531052f/attachment.html>