Question

The issue is obvious here.

https://www.facebook.com/TabascoUK/app_202624839826809

Using Google Chrome on Windows XP, FB.Canvas.setAutoGrow miscalculates frame size by two pixels. I would report it as a bug, but (1) I didn’t manage to reproduce the same behavior on all computers, even though they have the same setup. (2) I’ve looked at the all.js and it looks Okay – no obvious reason for the error.

I’ve tried reseting cache, updating browser, etc. But there still is 2px error.

What can be causing it?

Answer 1

I haven’t had any issues long time ever since this was posted. But since Chuck Morris seems to be experiencing the same issue, I will share my experience.

First of, I had erroneous assumption that FB.Canvas.setAutoGrow can be called at any time in code. It made sense since it then starts interval, which should detect any DOM changes. Well, it isn’t exactly that way.

Anyway, the trick is to load Facebook JS after the DOM is loaded. In my experience this helps to get around all glitches. If you are using jQuery, something like this will do.

$(function(){
    window.fbAsyncInit  = function()
    {
        FB.init({/*[..]*/});

        FB.Canvas.setAutoGrow(91);
        FB.Canvas.scrollTo(0,0);
    };

    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
});