New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 615816 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Jun 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Compat



Sign in to add a comment

z-index ignored with transformed element and another element with position:relative;

Reported by naniw...@gmail.com, May 30 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36

Example URL:
https://jsfiddle.net/2wm7eqam/

Steps to reproduce the problem:
1. give an element a css transform and set z-index to 2
2. on the same DOM-Level create another element position it relative and give it z-index: 1
3. move the transformed over the relative positioned element (eg. via translate, rotate)

What is the expected behavior?
the relative positioned element with z-index 1 should be below transformed element with z-index 2.

What went wrong?
the relative positioned element (z-index: 1) stays on top of transformed element (z-index: 2)

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.63  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

might be related to https://bugs.chromium.org/p/chromium/issues/detail?id=613976&q=z-index&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
 
Cc: tkonch...@chromium.org
Components: Blink
Labels: M-53 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on win8.1 and mac 10.11 Linux chrome version 51.0.2704.63  and canary - the relative positioned element with z-index 1 is above the transformed element with z-index 2.

Please find the screenshot

This is a non regression and can be seen from M43 builds to latest canary
Working fine in Firefox browser
Components: -Blink Blink>Paint
Status: Available (was: Untriaged)
Status: WontFix (was: Available)
You need to put position:relative on the z-index: 1 element. z-index only
applies to positioned elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Sign in to add a comment