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

[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

[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]

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.

It should have as it is not dependent on the browser, the CSS is hiding the frameuntil oaded.
The other setting is to make the background transparent so perhaps a combination of both will work: http://stackoverflow.com/questions/5...nsparent-in-ie.

Acorn

[Egg Bramhill]

It should have as it is not dependent on the browser, the CSS is hiding the frame until loaded.

I think the problem here is that only page one is loaded, so your script will work and only reveal the iframe when it's loaded, but after this the button to "Change Iframe" loads a new iframe so as the browser already thinks the page as complete so your code no longer works ???

I see the Flash on previewing in Xara. I know the browser iXara uses for previews is IE but don't know what version. Perhaps Rob could enlighten us.

I also see the flash in ie11 & occasionally in FF but not Chrome or Opera.

It's a strange way to load iframes, don't know why it's being done this way.

[steve.ledger]

I think the problem here is that only page one is loaded, so your script will work and only reveal the iframe when it's loaded, but after this the button to "Change Iframe" loads a new iframe so as the browser already thinks the page as complete so your code no longer works ???

I see the Flash on previewing in Xara. I know the browser iXara uses for previews is IE but don't know what version. Perhaps Rob could enlighten us.

I also see the flash in ie11 & occasionally in FF but not Chrome or Opera.

It's a strange way to load iframes, don't know why it's being done this way.

Xara's preview uses the IE version you have installed. There's no separate 'built-in' version for the Xara preview.

@scribbler: There's likely no solution to this, as the default background colour for an unloaded page is white, it takes IE a little while to parse any style for a page loaded into the iframe.
Suggest to your clients that they use a better browser than IE.