Why does a "Facebook Comments" iFrame have a different height when it is loaded in a container with CSS 'display: none'?

I am writing an web application that loads a page and then later uses javascript to display a Facebook Comments box using Facebook's XFBML code. I have the Facebook Comments iframe in a container which is set to "display: none" on page load. Later when a user clicks on a button the container is displayed.

The issue I have encountered is that when the page loads with the Facebook Comments container set to "display: none", the iframe that Facebook loads has a height that is much greater than what is expected. However, if I load the page with the Facebook Comments container set to "display: block" and then set it to "display: none" after the the page has loaded, the iframe gets the proper height attribute. I'm curious as to what causes this discrepancy in setting of the iframe's height.

My workaround is to load the page with the container's style set to 'display: block; height: 1px; width: 1px; border: none' and then use javascript after page load to set the container to 'display: none'. I'm just curious as to what causes this and if there is a better workaround than what I am doing.

Can anyone explain this phenomenon and tell me what the suggested solution is?

For your reference, below is a simplified version of my markup without the workaround in place. If you load this in a browser you and click the "Show Comments" button you will see the large gray area which is the Facebook Comments container and is much larger than the actual comments box.

<!DOCTYPE html>
<html>
    <head>
        <title>Facebook Commments Page</title>
        <style type="text/css">
            .initial-content { width: 100%; overflow: hidden; }
            .show-comments-button { float: left; background: #aaa; padding: 6px;}
            #facebook-comments { display: none; background: #eeeeee; }
        </style>
        <script>
            function showComments(e){
                var commentContainer = document.getElementById('facebook-comments');
                commentContainer.style['display'] = 'block';
            }
        </script>
    </head>
    <body>
        <div class="initial-content">
            <h1>My little web app</h1>
            <p>Here is the content a user sees when first loading the page.</p>
            <div class="show-comments-button" onclick="showComments(event);">Show Comments</div>
        </div>
        <div id="facebook-comments">
            <h1>Facebook Comments</h1>
            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>
        </div>
    </body>
</html>

I can't be certain, but perhaps display: none; functions by ignoring the height: attribute–– even though you may have set the height, display: none; overrides it (just like display: inline; for certain overrides height).

I recommend having the CSS display: none;, as a fallback for users who don't have JS,

#facebook-comments { display: none; }

then overriding to display: block; with JS

<script>
    var commentContainer = document.getElementById('facebook-comments');
    commentContainer.style['display'] = 'block';

    function showComments(e){
        ...
    }
</script>

before loading your Facebook comments. Once the iframe has loaded, just before </body>, just hide the div again:

<script>
    var commentContainer = document.getElementById('facebook-comments');
    commentContainer.style['display'] = 'none';
</script>

Maybe not the simplest way, but it should work.

Cheers!

Recommended topics

Hot tags