Problem with white flash on loading content into iframe

[scribbler]

Help please,
I need to prevent a white flash which appears for a brief moment when my iframe loads some new content on to a web page with a black background. the brief white flash only seems to appear when browsing pages in IE8 or lower. If I understand correctly one possible way to go about solving this is to add an alpha/opacity filter code snippet of some sort to the iframe or page? specifically with IE8 in mind. Would appreciate it if someone could provide me a working example of a way to achieve this in XWD. (example of problem included in attachment)
thanks

[gwpriester]

Welcome to TalkGraphics

I have no idea how to fix this, but check back. One of the more savvy members may have a suggestion.

[scribbler]

Hope so Gary, it will take a big weight of my shoulders if someone is able to solve it for me

[steve.ledger]

Very few people will still have IE8 installed in order to test this. As the problem is generated by IE8's rendering engine, I recommend updating IE (version 8 has serious security flaws in any case and should not be used, there are alternatives)
► https://www.whatismybrowser.com/guid...is-out-of-date

[scribbler]

Point taken Steve,problem is analytic's indicate there is still a fair amount of local visitors to my website who are still using IE8 or lower to browse through it and it's not really an option for me to tell them what browser to use to visit it.I acknowledge I might need to compromise this issue in the site design but googling around suggests there are some successful work around's out there for this problem in IE8, Its just that as yet I haven't got one to work for me in XWD

[scribbler]

Thanks Acorn for the help the script posted above hasn't solved the IE8 white flash problem though when implemented into XWD. So still looking for further help and ideas with this issue please.

[Acorn]

Hope so Gary, it will take a big weight of my shoulders if someone is able to solve it for me

You can try adding the following into the Page header: Page > HTML code (Head):

<script>
// Prevent variables from being global      
(function () {
      /*
          1. Inject CSS which makes iframe invisible
      */
    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] || 
              document.getElementsByTagName('script')[0];


    div.innerHTML = '­<style> iframe { visibility: hidden; } </style>';
    ref.parentNode.insertBefore(div, ref);
    /*
        2. When window loads, remove that CSS, 
           making iframe visible again
    */
    window.onload = function() {
        div.parentNode.removeChild(div);
    }
    
})();
</script>

The original detail is here: https://css-tricks.com/prevent-white-flash-iframe/.

Acorn