How to prevent requestAnimationFrame() flickering in IE11?

Question

I am trying to find a fix for the requestAnimationFrame() method in IE 11. I have been browsing the web to find a solution. So far, I have tried to include polyfills, but the bug doesn't go away.

Does anybody has solution for IE11 bug?

This is an example using jQuery 3.4 which uses requestAnimationFrame() method for the fadeToggle() method. You will be able to check the flickering in IE11.

Answer 1

You can try to solve the issue by using one of the suitable way mentioned below.

1. ADD A BACKGROUND COLOR Set a background color with CSS on the element that is fading in or out. This is the most basic way to solve the problem.

2. REMOVE THE CLEARTYPE FILTER After fading in an element you can add this simple callback function to fix the bug.

$('#fadingElement').fadeIn(2000, function(){
       this.style.removeAttribute('filter');
});

3. USE A CUSTOM FADEIN/OUT METHOD This method serve’s as a replacement for the built-in fadeIn() & fadeOut() methods for jQuery.

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
        $(this).fadeIn(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeOut = function(speed, callback) {
        $(this).fadeOut(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
})(jQuery);

References:

(1) jQuery fadeIn & fadeOut Problems in Internet Explorer

(2) How to Fix jQuery's Fade In/Out Functions for Internet Explorer

Note: I had added the code in snippet because this site was not formatting the code properly using code block.