Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a desktop div using JS, however, Microsoft browsers are displaying strange boxes alongside the textures, which appears to be a side effect. The problem can be observed on the following site:
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;
position: fixed;
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 solution or workaround for this issue, or could it possibly be an error on my end?