Home/ Questions/Q 6716803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:46:38+00:00

I’ve built an application to be used as a tab in a page. As

  • 0

I’ve built an application to be used as a tab in a page.
As its content is too long, i need to set the iframe height so there is no scrollbar.
My problem is that it works fine in chrome & ie, but not in firefox.
Here is what i’ve done:

<?php
    $signed_request = $_REQUEST["signed_request"];
    list($encoded_sig, $payload) = explode('.', $signed_request, 2);
    $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
      * {
            padding:0; margin:0; border: none; outline:none
        }
    </style>

</head>
<body style="width:520px; overflow:hidden">
<?php
     if (empty($data["page"]["liked"])) {
        echo "<img src=\"img/blur.jpg\" />";
    }
    else {
        echo "<img src=\"img/fan.jpg\" />";
    }
?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
    appId : 'xxx_app_id',
    status : true,
    cookie : true,
    xfbml : true
});
</script>
<script type="text/javascript">
    window.fbAsyncInit = function() {
         FB.Canvas.setSize({ width: 520, height: 3591 });
    }
    function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 3591 });
     }
</script>
</body>
</html>

Furthermore, i’ve done the exactly same app 3-4 times and it worked, so now i just changed the images to be displayed.
Looking the Firebug console i see no errors, and checking the applied css (from firebug again) i see the height of the iframe 800px.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, apparently the fbAsyncInit was never called, so i fixed the issue by calling the method manually like this:

    <script type="text/javascript">
    window.fbAsyncInit = function() {
         FB.Canvas.setSize({ width: 520, height: 3591 });
    }
    function sizeChangeCallback() {
        FB.Canvas.setSize({ width: 520, height: 3591 });
    }
    window.fbAsyncInit();
</script>

    Now everything works fine.
    If anyone has any clue why this is happening only in ff and only in this application (as i said in the question i’ve built the exact app 3-4 times – with just different images and text-) i’d appreciate sharing here…

    • 0