How to remove scrollbars from canvas on Firefox

Question

Firefox is adding scrollbars to the canvas even with the body set to overflow:hidden and the execution of FB.Canvas.setAutoResize();. Every other browser hides the scrollbars. When I remove all content from the page the scrollbars persist.

Sample: https://apps.facebook.com/fbtestapppb/

Answer 1

This is a known issue with canvas apps and page tabs, and has annoyingly been around for quite a while.

https://developers.facebook.com/bugs/309917422436936

Some people mention being able to use FB.Canvas.setSize({ width: 700, height: 800 }); or something like FB.Canvas.setAutoResize(500); and it gets around the issue.

Have you definitely set the iframe auto resize option in the apps control panel too?

Answer 2

With the introduction of Facebook Timeline the way to remove scroll bars and control page margins has changed. First (and most importantly) your body padding and margins MUST all be set to zero. This ensures all browsers process your canvas settings off absolute zero.

Depending on the 'Page Tab Width' (520px or 810px) option you set in your Apps/Page settings you will need to adjust the width in the following code. This block should be placed in the page Head:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Just below the Body tag add the following code:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
  FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>

Remember to change 'YOUR APP ID'. Also width: should equal either 520 or 810. Set height: slightly larger than you require to allow overflow.

This solution has been tested in IE, FF, Safari and Chrome!

Answer 3

I added this to my css and it seemed to work:

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

I had solved this problem that way:

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

  window.fbAsyncInit = function() {
        FB.init({
          appId      : app_id, // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });         

       var height_doc = $(document).height()+20; 
       FB.Canvas.setSize({height: height_doc});
  };

It's works for me. I hope that help.

Answer 5

Forget about body and html margins (I mean set them to zero).
Just place all your content (including header and footer) into a table with single cell.
At least all browsers will agree on how to calculate the height of the table...

like this:

 <table id='m_table' width=100% align=left border=0 cellspacing=0 cellpadding=0>
    <tr><td valign=top bgcolor=white align=center style='position:relative;'>

and do this :

setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);

works in IE,FireFox and Chrome/Safari...

Here is FB initialization code if you need it:

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

 function fbEnsureInit(callback)
  {
    if(!window.fbApiInit) setTimeout(function() {fbEnsureInit(callback);}, 50);
        else if(callback) callback();
  }
 fbEnsureInit(function() {
    FB.Canvas.scrollTo(0,0);
    var h = document.getElementById('m_table').offsetHeight+40;
   // console.log('setting size to '+h);
    FB.Canvas.setSize({height:h});
     setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
  });