iFrame white flash

Hello,

I’m creating a dynamic panel with different states and each state represents pages from a form that the user needs to fill in. At my second state (page) one of the items for the form is a iframe that includes html, css and javascript from the plugin with AxShare.

The problem I encounter is a white flash on the iframe when I go from state 1 to state 2 on the dynamic panel.
I tried the following things:

  • I saw that the standard code from Axure includes a css in resources/css/axure_rp_page.css that sets the iframe to white. I tried to make this black inside the browser, but that did not solve my problem. In this case the white flash becomes a black flash.

  • I already tried to hide the iframe and already show it at onload of the underlining page. But this did not work.

  • I also tried to make the iframe transparent but this caused more problems that the the dynamic panel did not load properly anymore.

  • I even tried to place javascript inside the iframe and with the plugin of AxShare to hide and show the iframe with the following code:

// 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 = '&shy;<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);
    }
    
})();

from: https://css-tricks.com/prevent-white-flash-iframe/

But this javascript did also not work. The white flash still appears.

Can someone help me how to get ride of this white flash/background that appears when the page is loading? This problem occurs on Chrome, Firefox and Safari. I just want that the external content is immediately loaded without first showing a background on my page.

Thanks in advance.

Howdy! do you have screenshots?

I think this effect is due to a combination of the default page color set in the browser (white) and Axure’s “prototype engine” loading the target page of an Inline Frame every time the dynamic panel is set to that state. Just like when you load or reload any page in a web browser, it starts with a blank canvas–that the HTML then fills–thus the brief white flash. Typically, if you keep a white page background, you wouldn’t see a “flash” but you would see an equivalent duration of blank white as the page in the Inline Frame loads. You’re just going to get a brief moment of “nothing” whenever you load a page and I don’t think there’s any way around that–if you absolutely must use an Inline Frame within a dynamic panel. But, because it is your prototype, you really don’t have to implement it this way. There are many other approaches which would give you a smooth transition. There are also some ways you could “smooth out” the Inline Frame approach a little.

This can work a little better if you add a Wait action for a few hundred ms before you show the Inline Frame. Adding a fade can help make it look more smooth and intentional.

My recommendation is to take whatever you have in that target page and just put it directly in the dynamic panel–thus no need to load a page in an Inline Frame.

If that really isn’t feasible, and the “smoother transition” approaches won’t work for you either, you could try placing the Inline Frame outside of your dynamic panel, on the main page, and directly in front of the panel–in the same location it would appear inside the panel. When the panel changes to this state, show the (already loaded) inline frame, thus exposing inline frame without a “flash”. Alternatively, place iframe behind your panel and bring to front/back as needed.

Here’s a quick demo showing these approaches.
iframe in dynamic panel.rp (169.4 KB)

Wow great solutions you propose. I’m sure I can solve my problem now! Thanks a lot for helping me out and giving so clear explanation! :slight_smile:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.