CODEWITHSUNDEEP
jqueryeventsiframebackground
Thomas
Thomas

Reputation: 55

iframe flashes "white" on load

I am using an iframe in my project and it seems that whenever it loads content on a opacity background - it flashes "white" for around 1 second before correctly appearing.

It seems that it fires loaded event before the jQuery script is ready. I have tried 

style="visibility:hidden;" onload="this.style.visibility = 'visible';"

but doesn't work. Any other ideas to get rid of this ?

Upvotes: 3

Views: 9420

Answers (5)

Joshua McGee
Joshua McGee

Reputation: 1

I found that inline styling the element works best.

<iframe style="background:black;" 
   height="100%" width="100%" scrolling="no">
</iframe>

I needed to have this style change based on a user's dark mode preference, so I used parameterization with calculated CSS variables.

CSS

:root
{ 
   --is-dark-mode: 0;
   --background-color-hue: 0; 
   --background-color-saturation: 0%; 
   --background-color-lightness: calc((100 - (var(--is-dark-mode) * 100)) * 1%); 
   --background-color: hsl(var(--background-color-hue), 
       var(--background-color-saturation), 
       var(--background-color-lightness)); 
}

HTML

<iframe style="background:var(--background-color);" 
   height="100%" width="100%" scrolling="no">
</iframe>

Upvotes: 0

AngularNewbie
AngularNewbie

Reputation: 83

I had exactly this problem, and tried all the remedies on this page without success. It was flashing on Chrome, not FireFox.

What worked for me was changing:

$("#iframe").prop('src', url);

to 

$("#iframe").attr('href', url);

Upvotes: 0

lubert
lubert

Reputation: 119

I had some difficulty with getting:

style="display:none" onload="this.style.display = 'block';"

to work in my situation on Chrome and Safari.

If these aren't working for you, try:

style="opacity: 0;" onload="this.style.opacity = 1;"

Upvotes: 0

Michael
Michael

Reputation: 41

If you have control over the framed page - Set your background color on that page to transparent. Most browsers are white by default

Upvotes: 4

Lucas Jones
Lucas Jones

Reputation: 20203

Try using:

style="display:none" onload="this.style.display = 'block';"

visibility:hidden doesn't actually "hide" the element as such - it still takes up the space it would if it were visible. display:none actually makes the element completely invisible, as if it doesn't exist.

Upvotes: 6

Related Questions