Steps to reproduce
I create a pseudo-element that covers the entire parent element, give it a
background and set a
filter on it.
z-index: -1 on it so that it appears under the parent element’s text breaks the filter effect.
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?
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: https://stackoverflow.com/a/34830743/265226
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