video element in a div with transform:translateZ() hides absolutely positioned overlay
Reported by
ibc@aliax.net,
Sep 9 2016
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36 Example URL: https://jsfiddle.net/7krah57v/11/ Steps to reproduce the problem: 1. Open https://jsfiddle.net/7krah57v/11/ in Chrome 2. Check the HTML, there is <div id='overlay'> that is not rendered on top of the video. 3. Open the same link in Firefox, it works. 4. Again in Chrome, modify the CSS in any of the following ways: - In #container element remove the perspective CSS property. - In #wrapper element remove overflow:hidden (this is however a different bug in Chrome). - In #wrapper element set transform: translateZ(250px) instead of 350px. With any of these changes the overlay div becomes visible. What is the expected behavior? The overlay element has position:absolute and z-index:1000 so it should ALWAYS be visible on top of the video. What went wrong? Depending on certain CSS properties on video's parent elements, the overlay becomes hidden by the video element. Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? N/A Does this work in other browsers? N/A Chrome version: 55.0.2855.0 canary (64-bit) Channel: canary OS Version: OS X 10.11.5 Flash Version: Shockwave Flash 22.0 r0 It fails in Chrome Stable (53.0.2785.101), in Chrome Android and in Chrome Canary. It fails in the exact same way in Safari (OSX). It works in Firefox.
,
Sep 12 2016
I want to add that, when using CSS perspective, if an element has a video element a some "position:absolute" element on top of it, and its transform:rotateX or transform:rotateY is 0deg, then the overlay becomes hidden by the video, or it becomes non-clickable, etc. But, if I manually replace 0deg with 360deg (or any other 360xN value) it is properly displayed. This is hard to show. It's happening to me in a complex app I'm building and it's very hard to show the issue in a jsfiddle, but I expect the issue to be 100% related to the one reported here. And the same code works perfectly in Firefox.
,
Oct 13 2016
Thats a really old CL - 3 years ago, and seems unrelated. Can we try the bisect again?
,
Oct 18 2016
Able to repro the issue on mac 10.11.6 win10 and Linux chrome version 54.0.2840.59 and canary 56.0.2891.7 - the overlay becomes hidden by the video element This is a regression in M36 and below is the bisect info Good Build: 36.0.1921.0 Bad Build: 36.0.1922.0 CL : https://chromium.googlesource.com/chromium/src/+log/36.0.1921.0..36.0.1922.0?pretty=fuller&n=10000 Possible suspect : https://codereview.chromium.org/208263010 Please reassign if this is not related to your change
,
Oct 18 2016
This build range is much too big (and the suspect does not seem relevant). Why did you not bisect it further?
,
Nov 9 2016
Chrome 32/36 is probably too old to really consider this a regression (we're not going to get a good bisect from that far back). Maybe triage as a new layout issue?
,
Nov 13 2016
As a workaround, you can set transform: translateZ(0) on the #overlay element.
,
Nov 15 2016
,
Apr 29 2018
Confirmed that using "transform: translateZ(0)" on the #overlay element does work. Thanks. Said that, if the workaround is known, shouldn't the fix be possible? |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by rnimmagadda@chromium.org
, Sep 12 2016Components: Blink>CSS
Labels: -Type-Compat M-53 OS-Linux OS-Windows Type-Bug-Regression
Owner: vollick@chromium.org
Status: Assigned (was: Unconfirmed)