Video with mix-blend-mode doesn't work over body element
Reported by
toufali....@gmail.com,
Aug 27 2016
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Example URL: https://jsfiddle.net/kx4q635h/ Steps to reproduce the problem: 1. visit https://jsfiddle.net/kx4q635h/ 2. notice the video blendmode not working over body element 3. if you remove the mix-blend-mode css from the video and add it to the img, it works as expected. What is the expected behavior? What went wrong? mix-blend-mode doesn't seem to work with <video> over <body> in Chrome. Works in Firefox. Note that having mix-blend-mode css on both video and img simultaneously breaks the mix-blend-mode. Not sure if this should be reported as a separate bug? Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 52.0.2743.116 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 22.0 r0
,
Aug 30 2016
Able to reproduce the issue on Windows-10 and Mac OS 10.11.6 using chrome latest stable M52-52.0.2743.116 by following steps mentioned in the original comment. Observed the videos are not playing in mix blend mode as seen on firefox. This is a non-regression issue seen on earlier version of chrome M35-35.0.1849.0 as well. Hence removing the bisect label.
,
Aug 31 2016
In both the case where the image draws correctly and incorrectly, the image has no composited layer. We seem to be painting differently. Chris, Tien-Ren, any ideas?
,
Aug 31 2016
Assigned just for tracking. Reassign if more info is available.
,
Aug 31 2016
This is a very weird corner case. In theory neither the <img> or the <video> should blend with the background image. It is due to 2 special rules in CSS: 1. <html> steals <body> background when <html> has computed background of 'none'. 2. <html> (window.document.documentElement) itself never paint background but let the document node (window.document) do it. And the <html> element itself has UA-provided z-index:0, means it creates a stacking context (= isolated group). For every stacking context, canvas->saveLayer (for non-composited layers) or a render surface needs to be created (for composited layers) to create isolated group. However we have an optimization to omit the creation of isolated group when no blending stacking children presents. I guess the optimization properly failed to detect the non-composited blending image.
,
Sep 13
It is now working as intended. Neither <img> or <video> blend with the root background in the above example. If you add a background on <html> to prevent <body> background from being stolen, both will blend with the body background. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by chrishtr@chromium.org
, Aug 29 2016Labels: Needs-Bisect
Status: Untriaged (was: Unconfirmed)