前の関連記事：SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法
IEだけfleXcrollのスクロールバーが表示されなくなっているのに気がつきました。IE8だけでなくIE10もです。原因を探します。
テストブログでバックアップテンプレートを適用するとなぜかheightも取得できず
いつのまにかIEはIE8でもIE10でもfleXcrollのスクロールバーが表示されずにIEのスクロールバーになっています。
開発者ツールでflexcroll_heightクラスをついているdivをみてみるとheightも設定されていませんし、flexcrollのclassもついていません。
SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で設定した以下のjQueryの部分が全く動作していないということになります。
<script type="text/javascript">
$(window).load(function () {
$.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);});
$('.flexcroll_height').addClass("flexcroll");
});
</script>
ChromeとFirefoxでは問題なく動作しています。Blogger:モバイルサイト(4)Chromeでモバイルサイトのナビボタンをカスタマイズと同じようにChromeでUser AgentをIE8やIE10に上書きしても症状再現はできませんでした。
先日までは問題はなかったので最近のカスタマイズがIE特有の機能にひっかかったのだと思います。
テストブログでテンプレートのバックアップをさかのぼって確認してみます。
(以下「なぜかIEではSyntaxHighlighterのオートローダーを使わないと動かず」の手前までは結論から外れた方向に向かった記録になってしまって、単なる苦労話になっているので読み飛ばしてください。）
テストブログにいまのテンプレートを適用するとなぜかChromeやFirefoxの表示までおかしい
IEだけ表示がおかしいいまのテンプレートをテストブログに適用すると、予想外なことに、問題がなかったはずのChromeやFirefoxまでfleXcrollの表示がおかしくなっています。
IEと同じようにheightも設定されていませんし、flexcrollのclassもついていません。
しかもheightが設定されていないのに33pxに固定になっていて1行目しかみえません。IEでも同じです。
テンプレート以外の要素が悪影響を及ぼすことがあるのでしょうか？
（この問題は追究しませんでした。もう力尽きたので、、、）
投稿本文を移植していないテストブログに同じテンプレートを適用していみるとIEだけおかしい状態が再現できました。
投稿本文で動かしているJavaScriptはないはずですが投稿本文に原因があるのかもしれません。
ほかに心当たりがあるのはテンプレートをいじったウィジェットです。
テンプレートでウィジェットをいじるとレイアウト画面で中身がみえなくなってしまっています。
2013.09.17追記。テストブログでChromeなどまでがおかしくなった原因がわかりました。Blogger:[忍者おまとめボタン]「お気に入りに登録」ボタンの表示を対応ブラウザのみに限定するのコードがテンプレートと、レイアウトのガジェットの両方にあったからです。レイアウト画面からガジェットを削除すると表示が直りました。どうして同じコードが二つあるとダメなのかはわかりません。テンプレートのバックアップを移植しても、レイアウトのガジェットは移植されないので注意しないといけませんね。
投稿本文を移植していないテストブログで原因を探す
まずは本番のブログの症状を再現できている投稿本文を移植していないテストブログで、IEだけfleXcrollの表示がおかしい問題の原因を探すことにしました。
テンプレートのバックアップをさかのぼっていくと8/25のテンプレートでは問題なく、8/29のテンプレートでは問題ありでした。
相変わらず何をした後にバックアップしたのか記録をとっていないのでテンプレートのHTMLをみて原因を探らないといけません。
Blogger:IE8で背景の色が消える問題(1)どのあたりが原因かはわかったでやったようにMergelyを使って比較します。
テンプレートのバックアップのxmlをワードパッドで開いたものをMergelyにコピペします。
左に8/25のテンプレート、右に8/29のテンプレートをコピペしました。
いくつか違うところがピックアップされましたが関係ありそうなのはやはり動作していないjQueryまわりです。
この部分の変更点は以下です。
①SyntaxHighlighterのオートローダーの使用をやめて、xml、css、jsのブラシのみロードへ変更。
（Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする）
②Blogger:[忍者おまとめボタン]「お気に入りに登録」ボタンの表示を対応ブラウザのみに限定するのjQueryコードを挿入。
③fleXcrollのcssファイルをjsファイルの直上から</head>の上に移動。
④</body>の上にあったwindow.setTimeout(function() {行から②のコードまでの<script type='text/javascript'>のコードを全てひとくくりにした。
⑤Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にするのCSSをコメントアウト。
⑥<b:include data='blog' name='google-analytics'/>を</head>の上から</body>の上に移動。
勘では④>③>②>⑥>⑤>①の順に怪しそうですが一番簡単そうな③から元に戻してみます。
③もとの位置に戻す。→関係なし。
②該当するコードを削除。→関係なし。
⑤コメントアウトを復活。→関係なし。
⑥もとの</head>の上へ移動。→関係なし。
やっぱり④が原因ですかね。上から<script></script>で切り出していきます。
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
これはもともとテンプレートにあったコードです。これを<script></script>で括り出し。→関係なし。さらにもとの位置の挿入したコードの上へ移動。→関係なし。
④の残りもすべて元のように括り出し。→関係なし。
うーん、どうやらこのあたりは関係ないようです。
次に関係ありそうなところはBlogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたいの部分です。
ここも変更部分を削除しましたが、関係なしです。
ほかも異なっているところを戻したり削ったりしても一向にIEのスクロールバーがfleXcrollのものになりません。
ということで遂に①に手をつけますが、これは戻すのは大変なのでまずは問題のない8/25のテンプレートにしてから変更していくことにします。
8/25のテンプレートから①を実行してみると→再現あり。
①が原因ですやん。
なぜかIE10ではSyntaxHighlighterのオートローダーを使わないと動かず
SyntaxHighlighterのオートローダーを使わずIEでfleXcrollを適用させようとしましたがどうしてもだめでした。
fleXcrollが適用できないというか、ｊQueryのコードが全く動かないのです。
つまりSyntaxHighlighterのdivの中にあるtableのheightも設定してくれませんし、flexcrollというクラスも追加してくれません。
全く同じコードでもChromeやFirefoxではちゃんと動きます。
IEでもSyntaxHighlighterのオートローダーを使うとちゃんと動きます。
ｊQueryのコードもあちこちいじってみましたがダメでした。
まったく理由が思いつきません。
ということで再度オートローダーを導入することにしました。
これでIE10ではちゃんとSyntaxHighlighterのdivにheightの設定とflexcrollというクラス名をつけることができましたがIE8はダメでした。
もうIE8では断念しました。
単にfleXcrollのスクロールバーに置き換わらないだけですのでページを読むのには支障はありません。
SyntaxHighlighterのオートローダーを導入するとやはり表示速度が遅くなりました。
どうやら原因はIEでは$(window).loadのタイミングが合わないときがあることのようです
たぶんIEではSyntaxHighlighterのtableのロードが終わる前に$(window).loadを実行してしまっているようです。
オートローダーを使うと時間がかかるので症状は悪化しそうですが、なぜかIE10ではSyntaxHighlighterのtableのロードしてから$(window).loadが実行できているようです。
IE8ではどうしても解決できませんでした。
IEへの対応策はうんざりしてきました、、、やれやれ。
参考にしたサイト
Mergely - Diff online, merge documents
テキスト比較ツール。使い方は左右にコピペするだけ。
0 件のコメント:
コメントを投稿