Affichage d'image avec IE11

Bonjour à tous,

J'ai un souci avec le bout de code JavaScript ci-dessous et en particulier avec IE11.

Il y a une fonction (add_bg) qui ajoute une image de fond pour chaque page de mon site et une autre qui leur applique des propriétés en particulier la propriété linear-gradient qui applique un effet de fondu sur certaines d'entre elles.

La syntaxe de ce fondu est la suivante : background-image: linear-gradient rgba(direction, couleur1, couleur2, couleur3, degré d'opacité);

Exemple : background-image: linear-gradient rgba(left, 255, 234, 247, 0.7);

Ces valeurs rgba ainsi que le nom des images (+ d'autres info) sont inscrites dans un fichier php que mon code JS va interpréter. Il se présente sous cette forme :

//page Index
$libpages['index'] = array();
 
$libpages['index']['title'] = 'abcdefgh';
 
$libpages['index']['description'] = 'ijklmnop';
 
$libpages['index']['keywords'] = 'qrstuvw';
 
$libpages['index']['background'] = 'bgindex.jpg';
$libpages['index']['background_member'] = 'bgindexMember.jpg';
$libpages['index']['backgroundcolor1'] = '255';
$libpages['index']['backgroundcolor2'] = '255';
$libpages['index']['backgroundcolor3'] = '255';

Firefox et Chrome sont en mesure de charger les images avec et sans fondu. IE11, quant à lui, n'affiche que les images sans fondu. En réactualisant la page, toutes les images se chargent pourtant bien.

J'ai tenté de remplacer la propriété linear-gradient() par -ms-linear-gradient() mais le problème persiste.

Voici mon code Javascript :

function add_bg(page,bgimg,bgc1,bgc2,bgc3){
 
    var myopacity0;
    var myopacity_n0 = 1;
    var myopacity;
    var myopacity_n = 0;
 
    var res = bgimg.split("_");
 
    var width = res[1],
    height = res[2].replace(".jpg", "");
    var posimg = '6.3%';
 
    if ((res[3] != '') && (res[3] != undefined)) posimg = res[3].replace(".jpg", "");
 
    var ratio = width/window.innerWidth;     
    var newheight = (height/width) * window.innerWidth;
    var newheightvw = (newheight/window.innerWidth)*100;
    var newheightvw2 = newheightvw.toFixed(2);
 
 
    myopacity0 = setInterval(function() { set_opa(); }, 50);
 
    function set_opacity() {
        myopacity_n0 -=0.2;
        document.getElementById("bg_modules").style.opacity = myopacity_n0;
        document.getElementById("bg_modulescl").style.opacity = myopacity_n0;
 
        if (myopacity_n0 <= 0) {
            clearInterval(myopacity0);
 
            document.getElementById("bg_modules").style.width = "100%";
            document.getElementById("bg_modules").style.height = newheightvw2+"vw";
            document.getElementById("bg_modules").style.opacity = "0";
            if ((bgc1 != '') && (bgc2 != '') && (bgc3 != '')) document.getElementById("bg_modules").style.background = "linear-gradient(0deg, rgba("+bgc1+", "+bgc2+", "+bgc3+", 0.7), rgba("+bgc1+", "+bgc2+", "+bgc3+", 0.7)), url(elements/"+bgimg+") no-repeat";
            else document.getElementById("bg_modules").style.background = "url(elements/"+bgimg+") no-repeat";
            document.getElementById("bg_modules").style.backgroundPosition = "inherit";
            document.getElementById("bg_modules").style.backgroundSize = "100% auto";
            document.getElementById("bg_modules").style.marginTop = "calc(9vw/2)";
 
            myopacity = setInterval(function() { set_opa2(); }, 80);
 
 
        }
    }
 
    function set_opa2() {
        myopacity_n +=0.2;
        document.getElementById("bg_modules").style.opacity = myopacity_n;
        //document.getElementById("bg_modulescl").style.opacity = myopacity_n;
        if (myopacity_n >= 1) {
            clearInterval(myopacity);
        }
    }
}

Si quelqu'un a une idée, je suis preneur. Comment faire pour que le code actuel puisse aussi bien afficher les images fondues ou non sous Firefox, Chrome et IE11.

Voici une vidéo qui illustre mon problème : https://streamable.com/lxi6z