Background-images and javascript show artifacts

Question

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 strange boxes additionaly to textures. It looks like a side effect. The problem would be found at the moment in the site:

https://www.kubera.info/

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 workaround for it, is there the error of mine?

Answer 1

Even modern versions of Microsoft browsers can't support more complex PNG files with transparency, and it looks like your PNG is at least 24 or 32-bit, and isn't using a transparency method that Microsoft supports.

Essentially, it looks like you have pixels in there that are partially transparent, and MS needs each pixel in there to be either a colour or transparent (not a partially transparent coloured pixel).

Try producing another as an 8-bit file, or working on the 'indexed' option - this is a useful page as to how: https://meta.wikimedia.org/wiki/Fixing_transparent_PNGs

You may really struggle to get the effect you want in IE or Edge though, given each pixel will likely need to be on or off, depending on your fog layers, so you may be better of detecting an IE browser, and simply having a static background for that.