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

Issue #9318580 • Assigned to Christian F.

Details

Author
Ana T.
Created
Oct 12, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 2 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.

Test https://codepen.io/thebabydino/pen/XjYRRG

Attachments

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: https://stackoverflow.com/questions/34830555/css-blur-filter-not-working-on-certain-pseudo-elements-in-ms-edge

      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?

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

    Sign in