facebook autoresize issues using lightbox to view images fullscreen

Question

Hi i have a facebook tab that displays offers. The offers use a ari image slider with a core joomla lightbox to view image fullscreen. I am using facebook autoresize function to get rid of the scrollbar and it works fine in firefox. I n all other browser internet explores chrome and safari when I click on an offer to view fullscreen in lightbox the height of canvas starts growing and the image moves down continuously. It seems that when the image opens up the facebook autoresize function just keeps adding height and the image moves. Here is my code:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId : 'APP ID', //Your facebook APP here
      cookie : true, // enable cookies to allow the server to access the //session


    });
     FB.Canvas.setAutoGrow();
  }

  window.onload = function() {
    FB.Canvas.setAutoGrow(91);
  }
</script>

This issue doesnt appear in firefox only in the other browsers. Any ideas what is happening?

Answer 1

This is wrong:

window.onload = function() {
   FB.Canvas.setAutoGrow(91);
}

When window.load is fired FB is not accessible yet.

The lines should be instead of FB.Canvas.setAutoGrow(); right after FB.init call.