filter on pseudo not applied if it has negative z-index

Issue #9318580 • Assigned to Christian F.


Ana T.
Oct 12, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

I create a pseudo-element that covers the entire parent element, give it a background and set a filter on it.

Setting z-index: -1 on it so that it appears under the parent element’s text breaks the filter effect.



0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Christian F.”

    • Can confirm, there’s evidence that this has been a bug since at least January 2016:

      The only solution that appears to have been able to be found is to increase the Z-index of every other element on the page, which isn’t an ideal solution for obvious reasons. This strikes me as a pretty big gap in standards compliance for the CSS filter standard.

    • This bug is still live in 15063.608 with Edge 40.15063 and EdgeHTML 15.15063 - over a year after it was filed! Is it possible to get a fix ETA on this?

    • This bug is still live on Microsoft Edge 42.17115.1.0 and Microsoft EdgeHTML 17.17115. It is really annoying.

    • This bug doesn’t apply for pseudo elements only and can be reproduced on non-pseudo elements.
      Here an example:

    • Is this also happening on backdrop-filter implementation on Edge 17 because I have made an html document and using backdrop-filter on an element with negative z-index

    • Seems I found that bug fixed. I tested a testcase that uses filter and negative z-index and it works perfectly

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

    Sign in