Setting iFrame CSS to display:none during load

Question

I have this:

<div class="upload_slide">
    <iframe class="upload_iframe" style="visibility:hidden;"></iframe>
</div>

If I then post some files to the iFrame and set .upload_slide to display:none;, while it's loading, will this affect the loading of the iFrame or the detection of when it finished loading?

score 11 · Accepted Answer · answered Sep 30 '12 at 13:54

11

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.

answered Sep 30 '12 at 13:54

TheCarver

18,072
24
91
146

31

Setting `display:none` on an `` (or any of its parents) will prevent it from loading. CSS *can* affect the DOM, but alas, not for ``s. – Steven Vachon Jul 17 '14 at 21:20
That isn't true. Images will load regardless of visibility, unless you're using `loading="lazy"`. CSS background images however, _do_ react to visibility, although the behaviour isn't totally standard across browsers. – JaffaTheCake Mar 12 '20 at 08:56
I actually came here because I've found out that setting 'display: none' on an iframe in chrome reload its url. – Hagai Wild May 07 '20 at 18:49

score 10 · Answer 2 · answered Sep 30 '12 at 14:23

10

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.

answered Sep 30 '12 at 14:23

robC

2,342
1
17
27

1

display:none makes Firefox no longer trigger the print dialog from the iframe. Great answer. – Valentin Despa Feb 19 '13 at 09:24

score 9 · Answer 3 · edited Jun 20 '20 at 09:12

9

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 21 '14 at 15:29

Ricardinho

1,049
11
14

i guess this is happening in iframes with chrome 59. Some table border dashed style is not loaded, if the iframe is set do display:none, and you do print of the iframe. – Miguel Jul 07 '17 at 14:48

score 1 · Answer 4 · answered Sep 30 '12 at 14:29

1

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.

answered Sep 30 '12 at 14:29

balanv

10,150
25
88
134

score 0 · Answer 5 · answered Sep 30 '12 at 13:37

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.

Setting iFrame CSS to display:none during load

5 Answers5

Linked