Problem with backgruound-images

Hi!

Could someone answer my question, please? I have developed a simple fog effect in CSS + Javascript. It works fine on the Firefox, Opera and Chrome. The problem exists only on IE and Edge. The effect moves two background images on desktop (div tag) using JS. Microsoft webbrowsers shows additional strange boxes additionaly to textures. It looks like a side effect. The problem would be found at the moment in the site:

Sample

Important elements of code:

CSS:

#fog_one {
background-repeat: repeat-x, repeat-x;
background-attachment: fixed, fixed;
background-image: url(/obrazy/marmur.png), url(/obrazy/marmur.png);
background-size: 128% 132%, 110% 128%;
z-index: -2;
;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

Javascript:

var fog_one;
function RenderFog()
{
        var Mil = MonadTimeVar.getMilliSeconds();
        fog_one.style.backgroundPosition = ''.concat(Math.ceil(Mil / 48),
'px ', Math.ceil(Math.sin(Mil / 1024) * Math.sin(Mil / 1240) * 8), 'px',
',', Math.ceil(-Mil / 72), 'px ', Math.ceil(Math.cos(Mil / 920) * 12),
'px');
}
function FogLoaded()
{
        fog_one=document.getElementById('fog_one');
        return setInterval(RenderFog,30);
}

Is there a workaround for it, is there the error of mine?

Thank you very much

Włodzimierz O. Kubera