昨晩ふんふふーんとjQueryをいじってると、ふと妙な動作に気づきました。 窓幅に関わる部分がちゃんと動いてねぇ。 上下の動きが妙に元気がいいんですよ。 まるで地球に穴を開けんとばかりに下へ下へ突き進む。 昨日はちゃんと動いてたのになぁとバグ取り開始です。

別のブラウザで確認する

JavaScriptのエンジンの異なるブラウザで確認。 V8(Google Chrome)で起こってるのでIonMonkey(Firefox)でも確認。同じくバグってる。

バグってる箇所を探す

今回は動きから取得してる値が変なのだろうと、動作がおかしくなっている箇所の変数に代入されている値をすべてチェック。 何やら jQuery(window).height() に変な値が。窓の縦幅でもdocumentの縦幅でもありません。 他の offset().top とかはちゃんと動いてます。 なんだろうこれ?

jQueryなしで窓の縦幅を取得してみる

window.innerHeight;
ちゃんと動く。てことはjQueryが原因? とりあえず別の関数を用意して、動かせるものはそれで動かすことに。 Light Boxなりの他のライブラリ関係が動かないのでそれらを全てOFFに。

jQueryのバージョンを下げてみる

1.9.1 から 1.8.3 にしてみても解決せず。

いらないJavaScriptをすべて止めてみる

jQueryのcoreだけ読み込んで、
$(window).height();
を実行。まだバグってる。

行き詰まってみる

頭を空っぽにするために寝ます。

そして解決へ

ソースを眺めてると見慣れぬ部分を発見。 問題のソースコード 犯人はこんなところにいました。
<!DOCTYPE>
なんの手違いがあったかわかりませんが、正しくは
<!DOCTYPE html>
ですね。 修正すると何もなかったかのように動き出しました! よくわからない動作をし始めたときは真っ先にDOCTYPEを確認すべきですねorz

ドキュメント宣言は正しい位置で、タイポは許されない。

ドキュメント宣言はHTMLバージョンや互換表示などブラウザの動作を決める重要なタグ。たとえタイポがなくとも手前に文字が出力されていたりと正しい位置に記述されていないと動かなくなります(‘A`)

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

3 件のコメント

  1. ピンバック: 写真ギャラリーのソース解説③ ~Javascriptによる要素の遅延読み込み~ | Analog Studio