Initializing Disqus comments in hidden element causes issue in FF 14.0.1

Question

This issue appears only in Firefox 14.0.1 (well I couldn't reproduce it in any other browser). If you put the code for Disqus comments inside an element that is hidden and wait until everything is fully loaded and then display the element using JavaScript, the comment box nor comments will show up. However, if you resize the window, it'll show up immediately. It's working fine in the latest version of Google Chrome and Safari though.

What's causing this and how to fix it?

Sample code to reproduce:

<div id="test" style="display:none;">
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'onlinefunctions'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
<a href="#" onclick="document.getElementById('test').style.display = 'block'">show</a>

Answer 1

This appears to be a relatively common issue with Disqus initialising in a hidden DIV. If you look at the DOM the iframe that Disqus' javascript code pulls into your div has a height of 0px, whereas in chrome and other browsers, it has a height of 327px when there are no comments to display.

Bit of a hacky workaround that works for me is to use CSS min-height fix on the Disqus iframe block, either in your CSS or inside a jQuery document.ready block:

<div id="my-disqus-block">
  <script type="text/javascript">
    // Normal Disqus embed code       
    var disqus_shortname = 'my_disqus_username'; // required: replace example with your forum shortname

    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    // Fix for Disqus box height in hidden Firefox
    $(document).ready(function() {
      $('#my-disqus-block iframe').css({
        'height': '327px',
        'height': 'auto !important',
        'min-height': '327px'
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>