Facebook Tab Scroll Bars

I am facing the well known scroll bars on Facebook custom tab issue (see picture).

I have tried every single answer there is on Stack Overflow to similar questions, even the outdated ones, nothing solves my problem.

I have also tried to remove ALL CSS from my page, to make sure it’s not something caused by my CSS. Issue persisted with zero CSS too…

Latest version of the code I tried:

<style type="text/css">
body, html {
    height: 1000px;
}
</style>
  
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script type='text/javascript'>
window.fbAsyncInit = function() {
  FB.init({
    appId: 'xxxxxxxxx', // App ID
  });
  FB.Canvas.setAutoGrow();
}  
</script> 

I have also tried FB.Canvas.setSize({ width: 640, height: 480 });. Unfortunately Facebook docs say This method is only enabled when Canvas Height is set to "Fluid" in the App Dashboard. I can not find such a setting anywhere…

I have also tried this version (from Hide Vertical Scroll bar in Facebook Page Tab (New)):

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({appId:YOUR_APP_ID_HERE,status:true,cookie:true,xfbml:false});
        FB.Canvas.setSize({ width: 810, height: 1050 });
    };
    (function(d, debug){
        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" + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));
</script>

enter image description here

Source: Facebook SDK Questions

LEAVE A COMMENT