filter grayscale in IE11 for html/body element

Question

I want to make my entire page black and white using grayscale. It works well in all browsers except IE 11 which is needed as well. There are many similar questions but usually for particular element like an image.

I have this code:

body {
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

So it works well, the entire page is black and white. How I could accomplish this for IE11? Is there any reasonable hack?

The question is different over the suggested answer -> I am looking for a solution here how to overcome the problem in IE in some reasonable way.

What else than an image do you want to turn grayscale exactly? If you only have texts or solid colors, then you could set all the elements colors manually, like `#elem{ color: green } .grayscale #elem { color: #CCC }` etc. — Kaiido, Aug 09 '19 at 02:55
the entire site, for example, if some disaster event happens. Just a requirement to fulfil. Would prefer some global solution over changing individual elements @Kaiido — Petr, Aug 09 '19 at 03:01
Can't be done. IE11 doesn't support any other filter than svg ones, on svg elements. You can hack something on images, by replacing it with svg elements, but for anything else you can't. So your only solution is to do it manually, so once again, What else than an image do you want to turn grayscale exactly? — Kaiido, Aug 09 '19 at 03:03
Why would you want to turn the entire page 'black and white'? Can't you just sent a font-color and background-color? The *default* is black text on a white background, which is in itself grayscale -- is this not what you're after? — Obsidian Age, Aug 09 '19 at 03:08
to put it in the context - it's an airline website so if a plane crashes, the PM should be able to turn the page black and white so basically all elements on the page @ObsidianAge — Petr, Aug 09 '19 at 03:14
@SumitPatel there is no solution and I am looking for a solution here — Petr, Aug 09 '19 at 05:55
@Dudis there is no way you will be able work with filter for IE. Its not supported :( — Sumit Patel, Aug 09 '19 at 06:17

score 1 · Accepted Answer · answered Aug 09 '19 at 09:29

As IE does not support the filter: grayscale, you can try to use SVG + JS approach to apply gray scale filter in IE.

Below is the part of the code snippet.

// Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
if (getInternetExplorerVersion() >= 10){
    $('img').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
        var el = $(this);
        el.parent().css({"width":this.width,"height":this.height});
        el.dequeue();
    });
this.src = grayscaleIE10(this.src);
});

// Quick animation on IE10+
    $('img').hover(function () {
        $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
    },
    function () {
        $('.img_grayscale').stop().animate({opacity:0}, 200);
    }
);

function grayscaleIE10(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
         }
     }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
    };
};

Reference for full sample code:

Cross-Browser Grayscale image example using CSS3 + JS

Output in IE 11:

filter grayscale in IE11 for html/body element

1 Answers1