Question

I have few pages that I show from my main page inside iframe.

I got a background image in the main page, when I click the button to change the page inside the frame the frame background color is becoming white somtimes until the page is visible.

I added background-color:transpert to the pages themselves and to the main page CSS.

I checked the site with FireFox and IE and it look fine (the background of the frame doesn’t change) but with Chrome it somtimes rendering fine like I wanted it to be and other times the iframe background goes White.

Can i do anything that will fix that?

Answer 1

As this is browser behavior I doubt it can be really “fixed”.

One workaround is to hide the frame while it’s loading (only for Chrome) – here is the code:

var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
    var oFrame = document.getElementById("myframe");
    if (isChrome) {
        oFrame.style.visibility = "hidden";
        oFrame.onload = function() {
            oFrame.style.visibility = "visible";
        };
    }
    oFrame.src = url;
}

Live test case. (Reloading same frame there but the concept is the same)