Filter: Blur Not Working on Ms Edge

filter: blur not working on MS Edge

Update: This issue no longer exists in recent builds of Microsoft Edge, and should be resolved via the Windows 10 Anniversary Update on August 02, 2016.

---

Thank you for reporting this issue. I work on the Microsoft Edge team, and can confirm that your fiddle reproduces the issue being described. While I don't presently have a work-around to offer, I will file this and personally notify the appropriate team(s) so as to give it earlier attention.

When I have more to share, I will return to update this answer.

CSS blur filter not working in edge when transform property is set

If I remember correctly, this is a bug in Edge.

This should work:

#content-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url("https://i.imgur.com/qfGEt3o.jpg") no-repeat top center fixed;
    background-size: cover;
    transform: scale(1.03)
}

#content-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url("https://i.imgur.com/qfGEt3o.jpg") no-repeat top center fixed;
    background-size: cover;
    filter: blur(5px) brightness(60%);
}

CSS3 filter not working in Edge

CSS filters are supported by Edge according to its own documentation at https://developer.microsoft.com/en-us/microsoft-edge/platform/status/. The support has been there since the November 2015 update.

Interestingly with your code snippet the filter works for me, but on http://www.urbansportsleague.org/gallery it does not work if I don't remove the -webkit-transform: rotateY(180deg); rule on .gallery-img > img. Could it be that Edge is a bit buggy when these things are combined? And yes, Edge also reads that -webkit-transform because many websites forget to include the equivalent transform rule.

I also tried to remove other CSS that shouldn't affect the behavior of the filter. After removing just Bootstrap and backgrounds, I got the page into an otherwise broken state where the filter worked correctly most of the time. Still sometimes the image just disappeared. Sometimes the image disappeared just after the filter had been applied to the image for a fraction of a second.

CSS blur filter not working on certain pseudo elements in MS Edge

This appears to be a limitation in our implementation. I'm filing an issue right now, and will have the appropriate team evaluate the repro as soon as possible. For now, the best option is likely to avoid positioning the image beneath the content (with a negative z-index), and instead position the content above the image (with a higher z-index).

Fiddle: https://jsfiddle.net/jonathansampson/610arg2L/

/* Above Fiddle contains sample CSS */

Filed Issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/

CSS BACKDROP FILTER: When it will be available on Microsoft Edge?

This feature just landed in Windows 10 Insider Preview build 17063 (EdgeHTML 17), so there's a good chance it will be available in the next major release of Windows 10 that's coming later this year.

Edge browser: css filter property

Yes it is supported but you have to activate this in about:flags.

Position Fixed not working when CSS Filters applied on same element in Microsoft Edge

It is a bug, ms-edge-rendering-problem-of-css-filter, should have been fixed but obviously not.

Here is a workaround, where you still can use position: fixed and the image and filter is set using the :after pseudo-element.

body {  height: 5000px;}
.fixed {  position: fixed;  left: 0;  height: 100%;  width: 100%;}.fixed:after {  content: ' ';  position: absolute;  left:0;  top: 0;  height: 100%;  width: 100%;  background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);  background-repeat: repeat;  background-attachment: fixed;  -webkit-filter: brightness(70%);  -moz-filter: brightness(70%);  -o-filter: brightness(70%);  filter: brightness(70%);}

<div class='fixed'></div>

Why doesn't this CSS Blur work in IE, but works in Chrome?

CSS3 filters do not work in IE 10 — they are not supported. Some older versions of Firefox also don't support filters.
You can check for support at this link :
http://caniuse.com/#feat=css-filters

---

Related Topics