CODEWITHSUNDEEP
javascriptcsswindowsfacebookgoogle-chrome
Gajus
Gajus

Reputation: 73838

Google Chrome/Windows/FB.Canvas.setAutoGrow issue

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?

Upvotes: 0

Views: 894

Answers (3)

Mahabub
Mahabub

Reputation: 1

I had the same issue and i found i was added 

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

But in chrome you have to add by the following way 

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>

Different protocol not work in chrome always use https

or the best way could be 

 <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

Upvotes: 0

Chuck Morris
Chuck Morris

Reputation: 1148

Guy,

I really appreciate you following up on this, I was really hoping that your way was going to work in my setup, because it's a lot cleaner than my hack fix, but it's still miscalculating the iframe by 2pixels. Anyways, this is what I did just in-case if anyone runs into this. 

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


    // Additional initialization code here
    FB.Canvas.setAutoGrow(91);
    FB.Canvas.scrollTo(0,0); 

    //FB.Canvas.setAutoGrow is miscalculating the height by 2 pixels in webkit browsers
    //so we shorten the content by 2 pixels right away, and a second later if things were a little too slow
    window.setTimeout(function() {
        $("#footer").css("height", "74px");
    }, 250);
    window.setTimeout(function() {
        $("#footer").css("height", "72px");
    }, 1000); 
  };

Upvotes: 0

Gajus
Gajus

Reputation: 73838

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));
});

Upvotes: 1

Related Questions