CODEWITHSUNDEEP
cssgoogle-chromeiframe
samy
samy

Reputation: 1969

iframe rendering in Chrome

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?

Upvotes: 1

Views: 5085

Answers (2)

Petr Urban
Petr Urban

Reputation: 298

I used very similar attitude. This approach works only in case the page inside your iFrame is under your controll.

The change is that the page inside iframe finds the iframe in parent window and makes it visible again:

<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />

// inside my_page.html:
window.onload = function() {
    // make sure the parent iframe is visible
    if (window.parent)
    {
        var nodeIframe = window.parent.document.getElementById(window.name);
        if (nodeIframe)
        {
            nodeIframe.style.visibility = "visible";
        }
    }
};

Upvotes: 1

Shadow Wizard
Shadow Wizard

Reputation: 66389

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)

Upvotes: 3

Related Questions