Проблема с Google Chrome / Windows / FB.Canvas.setAutoGrow

Question

Проблема здесь очевидна.

https://www.facebook.com/TabascoUK/app_202624839826809

При использовании Google Chrome в Windows XP FB.Canvas.setAutoGrow неправильно рассчитывает размер кадра на два пикселя.Я бы сообщал об этом как об ошибке, но (1) мне не удалось воспроизвести одинаковое поведение на всех компьютерах, даже если они имеют одинаковые настройки.(2) Я посмотрел на all.js, и он выглядит хорошо - нет явных причин для ошибки.

Я попытался сбросить кэш, обновить браузер и т. Д. Но все еще есть ошибка 2px.

Что может быть причиной?

Answer 1

У меня не было проблем с тех пор, как это было опубликовано. Но поскольку Чак Моррис, похоже, испытывает ту же проблему, я поделюсь своим опытом.

Прежде всего, у меня было ошибочное предположение, что FB.Canvas.setAutoGrow может быть вызван в любой момент в коде. Это имело смысл, поскольку затем начинается интервал, который должен обнаруживать любые изменения DOM. Ну, это не совсем так.

В любом случае, хитрость заключается в загрузке Facebook JS после загрузки DOM. По моему опыту это помогает обойти все глюки. Если вы используете jQuery, подойдет что-то подобное.

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

Answer 2

У меня была такая же проблема, и я обнаружил, что был добавлен

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

Но в хром вы должны добавить следующим образом

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

Другой протокол не работает в Chrome, всегда используйте https

или лучший способ может быть

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

Answer 3

Парень,

Я очень ценю, что вы продолжили в этом, я очень надеялся, что ваш путь сработает в моей настройке, потому что он намного чище, чем мое хакерское исправление, но все равно не учитываетiframe на 2 пикселя.В любом случае, это то, что я сделал на всякий случай, если кто-то столкнется с этим.

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