{"id":9448,"date":"2011-05-17T13:42:40","date_gmt":"2011-05-17T20:42:40","guid":{"rendered":"http:\/\/css-tricks.com\/?p=9448"},"modified":"2019-07-20T16:34:22","modified_gmt":"2019-07-20T23:34:22","slug":"prevent-white-flash-iframe","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/prevent-white-flash-iframe\/","title":{"rendered":"Prevent White Flash While Iframe Loads"},"content":{"rendered":"

If you Google around about this problem (at the time of this writing), you’ll find some incomplete answers and some other snippets advocating this bad practice:<\/p>\n

<!-- NO! Bad! -->\r\n<iframe src=\"...\" style=\"visibility:hidden;\" onload=\"this.style.visibility='visible';\"><\/iframe><\/code><\/pre>\n
The reason this is bad is that the CSS will hide the iframe no matter what and users with JavaScript turned off will never see that iframe. Now I’m not<\/a> usually one to go to extreme lengths to cater to that crowd, but I’m all for using better solutions that do solve that issue when they are available.<\/p>\n
The Solution<\/h3>\n
Thanks to Paul Irish and his Surefire DOM Element Insertion<\/a> and Ryan Seddon and his article on inserting scoped style elements<\/a>, we have this:<\/p>\n
\/\/ Prevent variables from being global      \r\n(function () {\r\n\r\n      \/*\r\n          1. Inject CSS which makes iframe invisible\r\n      *\/\r\n    \r\n    var div = document.createElement('div'),\r\n        ref = document.getElementsByTagName('base')[0] || \r\n              document.getElementsByTagName('script')[0];\r\n\r\n    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } <\/style>';\r\n\r\n    ref.parentNode.insertBefore(div, ref);\r\n\r\n        \r\n    \/*\r\n        2. When window loads, remove that CSS, \r\n           making iframe visible again\r\n    *\/\r\n    \r\n    window.onload = function() {\r\n        div.parentNode.removeChild(div);\r\n    }\r\n    \r\n})();<\/code><\/pre>\n
Just include that on any page (in the <head><\/code>) with the white flash problem and it will be solved. Just note that we’re using window.onload here, so if your page also uses that somewhere, combine them.<\/p>\n
How it Works<\/h3>\n
    \n
  1. It inserts some CSS on the page (right away) which makes all iframes invisible. You can’t see a white flash on an iframe that’s not there!<\/li>\n
  2. When the window is done loading (which means iframes are done loading too), this CSS is removed, which makes the iframes visible again<\/li>\n<\/ol>\n
    Browsers Affected<\/h3>\n
    At the time of this writing, I’m able to replicate the problem in Chrome 11 and Safari 5 (so essentially a WebKit issue). Current Firefox, Opera, and IE are fine.<\/p>\n
    What About… other stuff?<\/h3>\n
    You can put the allowtransparency=\"true\"<\/code> attribute on the iframe. You can set the iframe’s background to transparent with CSS. You can make sure the background on the source document matches the background of the parent page. None of that stuff works. This works. Well… it works for users with JavaScript turned on, anyway. =)<\/p>\n","protected":false},"excerpt":{"rendered":"
    How to prevent an iframe from flashing white while the page is loading. An ugly problem when the background of your site is anything other than white.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1634],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":336671,"url":"https:\/\/css-tricks.com\/maps-scroll-wheel-fix\/","url_meta":{"origin":9448,"position":0},"title":"Maps Scroll Wheel Fix","date":"March 23, 2021","format":false,"excerpt":"This blog post by Steve Fenton came across my feeds the other day. I'd never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and and out of HERE maps with the scrollwheel. So imagine you're scrolling down a\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/here-map-bend.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334299,"url":"https:\/\/css-tricks.com\/iframe-feedback\/","url_meta":{"origin":9448,"position":1},"title":"iframe feedback","date":"February 11, 2021","format":false,"excerpt":"What if an