ajax使ったサイトを制作した際にiPhoneでtwitterのソーシャルボタン設置を躓いた件

1ヶ月に1記事は書かないとなぁ～とかいいつつ、もう2ヶ月も経っていました。
どうも、Teaです。

割と最近の案件で、ヘッダーとフッターはHTMLで固定。
コンテンツ部分はバックエンドから吐き出してもらったjsonかjsonpかxmlだかのデータを取得し、
そのデータを使ってHTMLを構築するようなサイトを作ることがありました。

そんな中、社内テストアップで確認作業中の際にiPhoneのみ表示がおかしい事が判明。
何故か横フリックができてしまう場合があるという問題が発生。
※PC・Android系は問題無し

viewポートの設定も問題なく、cssも特に問題なく、毎度発生するわけでもなく、リロード時たまに発生。
問題箇所を探っていた際になんと、twitterのソーシャルボタンが原因と判明。

どうも画像というかソースコードというか、twitterの非同期処理が中断されてるっぽくて
表示されない場合があり、表示されなかった場合のみ横フリックができてしまっていました。

割と意味不明だったのですが、下記の方法で解決できました。

解決方法

まずはtwitterのwidgetsを読み込み

<script>window.twttr = (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0],
   t = window.twttr || {};
 if (d.getElementById(id)) return t;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);

 t._e = [];
 t.ready = function(f) {
   t._e.push(f);
 };

 return t;
}(document, "script", "twitter-wjs"));</script>

twitterのボタンを入れるdivタグを作る

<div class="sns-btn_twitter"></div>

非同期処理完了後にtwitterのボタンを書き出しさせる

.always(function() {
	$('.sns-btn_twitter').append('<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="none" data-url="'+location.href+'" data-text="'+document.title+'">ツイート</a>');
	twttr.widgets.load();
});

急ごしらえな感じがしないでもないですが、
上記の方法でとりあえず解決できました。