Problem with white flash on loading content into iframe

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

Welcome to TalkGraphics

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

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

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

Quote:

---

Originally Posted by scribbler

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):

Code:

---

<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

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

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.

Quote:

---

Originally Posted by 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.

---

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

Quote:

---

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.

Quote:

---

Originally Posted by Egg Bramhill

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. :)

Thanks for clarifying the IE question Sledger. However I disagree re the cause of the white flashing. I believe it's to do with the strange method scribbler is calling the iframe content. It has nothing to do with IE8 as it's also present in IE11 and other up to date browsers.

HERE is an example of loading black background pages into iframes. I can't see any flashing (Not using Acorns code either)

Thanks guys for the input. I will keep working on it for a while longer and see where I end up :'(. Any additional help or ideas with this will gladly be taken on board.

As I haven't got IE8 installed, could you say whether you're getting the flashing on the link I gave above?

Quote:

---

Originally Posted by Egg Bramhill

As I haven't got IE8 installed, could you say whether you're getting the flashing on the link I gave above?

---

Looks promising that Egg,I can confirm your example works just the way I want it to without any white flash in IE8. Would you be kind enough to post a xara .web attachment of this page example so I can examine it further in XWD. Will pick up on this again in the morning need to get some beauty sleep. thanks

Hi scribbler, it's fairly simple. There are 2 .xar files.

The first is a mini website which contains 5 300 x 300 px pages which can be called via iframes (They also contain a nav bar at the top which was only created for testing purposes but not required in the final version so I hid them with a black rectangle on Layer 5)

The second is just a one page website that uses pop-up layers with iframes to load the pages fom the above website.

Quote:

---

Originally Posted by Egg Bramhill

Thanks for clarifying the IE question Sledger. However I disagree re the cause of the white flashing. I believe it's to do with the strange method scribbler is calling the iframe content. It has nothing to do with IE8 as it's also present in IE11 and other up to date browsers.

HERE is an example of loading black background pages into iframes. I can't see any flashing (Not using Acorns code either)

---

Yes, your placeholder flashes white in IE9 on load here.

Cheers Steve. That appears to confirm it was the manner in which scribbler was originally loading his iframes that was creating the effect, as it was also present on all up todate browsers as well.

Egg, I'm saying your iframe-test does flash white on load - the one you said you can't see any flashing.

The OP's iframe code seems normal to me, with the exception that he's added the allowtransparency="true" attribute which is useless without the proper CSS in the head of the page that loads into the iframe which he doesn't have..

Example code needed in the pages which load inside the iframe:

Code:

---

<style type="text/css">
body {background-color:transparent;}
</style>

---

In any case, this does not stop the white default viewport background flashing before the page loads in the iframe.

What are you seeing which is unusual about his iframe?

Steve, if I preview the OP's web file it doesn't matter what version of browser I use, I only have the latest versions of the top four, I see flashes, so it's not just an IE8 issue, it's common to all browsers regardless of version.

I understand that you see a white flash on load on the top placeholder, but I don't see any on the bottom placeholder. Acorns code will probably sort this out, as it only needs the one page to load. I'll give it a try.

Okay, I've added Acorns code to the head of the loading page and I no longer see a flash on load. My point was that scribbles file created a white flash every time any iframe was loaded, which I got around by calling the iframes in pop-up layers.

Thanks everyone, with the combined help provided I seem to be "nearly" there now in fixing this issue, I say "nearly" as there are still a few teething problems I am having with it.
These are my findings so far: Firstly the http: live example Here provided by Egg Bramhill I found works flawlessly In all versions of IE without even a flicker of a white flash. I then downloaded the Xara .web file of this same example which Egg B has also provided (see attachment below) I then previewed Egg's example locally in Xara using the XWD default IE preview browser.This behaved less efficiently the annoying white flash was back again, more or less each and every time I first clicked on a nav button to open any given iframe (usually after the index page had initially first loaded), although the white flash was far less frequent on consequent clicks of the nav button bar than previously it was still showing from time to time.

Seems odd that the same source example should behaviour so differently, as to the best of my knowledge both of Egg's examples are the exact same.
If I am reading this correctly it seems quite possible the IE white flash might only be present when the page is published and previewed locally on the pc in the xwd preview browser and hopefully the white flash is not noticeable once the page is uploaded and published live to the web.
That's about were I am up to with this at the moment

Would appreciate it if someone could please confirm this for me using both Egg's link example HERE and his .web file attached below to compare them both live and local.

Additionally... If after applying the previously mentioned fixes you find you are still occasionally seeing the white flash. A tweak to further help reduce the chances of seeing it is to also:

(a) Set the index page transition effect slider to fade level 0.5 instead of instant.
and then
(b) Set each of the Nav link button's transition effect slider setting to fade level 0 instead of instant. Example attached below.