I use JS to create an Image() then set the src to be a PNG from a remote location (Amazon S3). When the image has loaded I attach it to the DOM with appendChild().
This works fine in most browsers but in IE11 nothing displays AT FIRST.
If I open the dev tools then the image element is there in the DOM but not visible in the actual display. As soon as I toggle a style (any style) off and on in dev tools it appears though.
It also appears if I resize the page (I'm not listening for resize anywhere) or select some text elsewhere in the build. If I click and drag on the area where it should be displaying then I get the ghost preview of the image and can drag it around but as soon as I drop it it disappears again.
Most weirdly, if I scroll the page so that part of the area where the image should be moves off screen then when I scroll back that part of the image is visible but the rest is still not rendered, as though it has been masked.
I've loaded this same PNG in the past and never seen this issue and I can't see that I'm doing anything different this time round.
Any thoughts? Or do I need to write another email to my boss asking why we even still support that manky old POS.
IE has planting of issues displaying PNGs, perhaps this might help https://perishablepress.com/css-hackz-series-png-fix-for-internet-explorer/