facebookの埋め込みをリサイズの度に幅調整するようにしたら、Edgeの表示がおかしかった件

facebookの埋め込みをリサイズの度に幅調整するでfacebook埋め込みの幅を調整するスクリプトを書きましたが、テストを繰り返す中で「Edgeで表示すると初回表示時に正しく表示されない」という現象を確認しました。 F12で開発者ツールを開くことも含めてresizeイベントが走れば表示されるのですが、最初の表示で出てこないのはまずかろう、と。 また、詳しい条件は不明ですがスクロール量に応じて下からフェードインしてくるアニメーションと組み合わせると、PC幅の場合だけresizeイベント後も含めて描画がされない、という現象にも遭遇しました。 後者は結局原因が分からず断念しましたが、前者に関してはJSに後述のような改修を実施して乗り切りました。

$(function() {
    if($('#fbWrapper').length) {
        facebookResize();
    }
});

//facebookをリサイズする度に幅を調整
function facebookResize() {
    var $fbWrapper = $("#fbWrapper");
    //連想配列の形にして、ミュータブルな引数とする
    var fbArray = {
        timer: false,
        fbBeforeWidth: 0,
        fbWidth: $fbWrapper.width()
    };
    fbResizeProcess(fbArray, $fbWrapper);
    $(window).on("resize", function() {
        fbResizeProcess(fbArray, $fbWrapper);
    });
}

//facebook埋め込みメイン処理
function fbResizeProcess(fbArray, $fbWrapper) {
    if(fbArray.timer !== false) {
        clearTimeout(fbArray.timer);
    }
    fbArray.timer = setTimeout(function() {
        fbArray.fbWidth = $fbWrapper.width();
        if(fbArray.fbWidth !== fbArray.fbBeforeWidth) {
            $fbWrapper.html(fbCodeGen(fbArray.fbWidth));
            window.FB.XFBML.parse();
            fbArray.fbBeforeWidth = fbArray.fbWidth;
        }
    }, 300);
}

//facebookのコードを生成
function fbCodeGen(w) {
    var hrefUrl = 'https://www.facebook.com/facebook';
    var name = 'Facebook';

    return '<div class="fb-page" data-href="' + hrefUrl + '" data-tabs="timeline" data-width="' + w + '" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="' + hrefUrl + '" class="fb-xfbml-parse-ignore"><a href="' + hrefUrl + '">' + name + '</a></blockquote></div>';
}

しかしまあ、今回いくつかのサンプルを作ってみた結果嵌まるときは嵌まる感がしたので、下手に多用はしない方が良さそうな気がしてきました……。