Relative Z-index incorrectly calculated

Issue #13392888 • Assigned to Christian F.

Details

Author
Brian G.
Created
Aug 23, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

This problem is illustrated here: https://codepen.io/anon/pen/MvXOJj

The expected behavior of the pen is best illustrated on any browser other than IE/Edge (e.g. Chrome, Safari, Firefox, Opera, Yandex). Namely the light grey element should be animated in from of the red content and behind the dark grey content.

The light grey and dark grey elements are siblings of a common parent. The common parent has a z-index of 5, which places it above the red element and establishes a new stacking context. The light-grey element has position absolute which implicitly raises the stacking order above other elements. To counter this, a z-index of -1 is applied.

What should happen is that the z-index:-1 should place it below its sibling, but the parent’s stacking order should keep it above the red element. In IE/Edge, the light grey element is incorrectly placed below the red element.

And WOW! Is the re-CAPTCHA on this page is annoying.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “wptcomptri@microsoft.com”

      Changed Assigned To from “wptcomptri@microsoft.com” to “Christian F.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in