Setting iFrame CSS to display:none during load

Question

I have this:

Answer 1

No, the iFrame's loading and load detection should not be compromised by setting the display to none.

CSS is just for style, it has no ability to affect the DOM.

Answer 2

As far as I am aware, it should work fine. I've been using hidden iframes to load stuff for a while and haven't had any issues.

That said I know that some browsers try to be efficient by not loading images that are hidden, so it's possible that some browsers (particularly mobile ones) do the same with iframes.

Answer 3

There shouldn't be a problem but if there is, a good trick can be to move the element offscreen rather than hiding it. You can create a class like

.offscreen{
    position: absolute;
    left: -5000px;
}

which you can add and remove as needed.

Answer 4

Nope.. Not at all..

CSS - display:none or visibility:hidden only says the browser to not to show the iframe content to user.

But the functionality will work fine without any issues.

Answer 5

Firefox currently does have an issue with display:none:

Some browsers assume that when "display:none" is applied to replaced elements (like Flash or an iframe) the visual info for that element is no longer needed. So, if the element is later displayed by the CSS, the browser will actually recreate the visual data form scratch.

I imagine that having the iframe default to "display:none;" makes the browser skip the rendering of the HTML so the tags don't have any dimensions. I would set the visibility to "hidden" or position it off the page rather than use "display:none;".

Steven Paligo

Link