FB setAutoResize not working on FF

Question

OK, so i've been working on an FB app that changes height on every page. I, obviously used the setAutoResize function in my app layout and i have the following:

window.fbAsyncInit = function() {
    FB.init({appId: '###', status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize();        
};

And it works fine in IE, Safari and Chrome but not in FF4. I also used:

window.setTimeout(function() {
    FB.Canvas.setSize({height: $('body').height()});                
}, 1000);

but no luck either. Does anyone experienced this before? tnx in advance. Mark

Answer 1

This sounds like it might be a bug? Check out: http://bugs.developers.facebook.net/show_bug.cgi?id=10889

If this is affecting you vote it up :)

Answer 2

An answer has already been provided, but I might as well post my solution to the problem. In Firefox the scrollbars are still part of the iFrame even if your page fits. They just don't have the blue scroller. This adds about 20px.

I don't think that your jQuery solution will work because height() doesn't take into account margin and padding. Maybe try this.

FB.Canvas.setSize({ height: $(document.body).outerHeight(true) + 20, width: 760 });

Answer 3

I added this to my css and it seemed to work (didn't have to muck with my autoresize):

body {
    margin-top: -20px;
    padding-top: 20px;
}

If you already have padding added to the top of your body, you will likely need to add 20px to it.

I assume it's because firefox measures the body height differently than other browsers.

Tested in ff8, chrome16 and ie9 with no negative repercussions.

Answer 4

FYI Warning! According to the Facebook Developer Roadmap FB.Canvas.setAutoResize will be renamed to FB.Canvas.setAutoGrow on July 5, 2012.

From the page:

We have renamed FB.Canvas.setAutoResize to FB.Canvas.setAutoGrow so that the method more accurately represents its function. FB.Canvas.setAutoResize will stop working on July 5th. We will completely delete the function on August 1st.