昨晩ふんふふーんとjQueryをいじってると、ふと妙な動作に気づきました。
 

窓幅に関わる部分がちゃんと動いてねぇ。

上下の動きが妙に元気がいいんですよ。
まるで地球に穴を開けんとばかりに下へ下へ突き進む。

昨日はちゃんと動いてたのになぁとバグ取り開始です。

別のブラウザで確認する

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

バグってる箇所を探す

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

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

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

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

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

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

jQueryのcoreだけ読み込んで、

を実行。まだバグってる。

行き詰まってみる

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

そして解決へ

ソースを眺めてると見慣れぬ部分を発見。
問題のソースコード
犯人はこんなところにいました。

なんの手違いがあったかわかりませんが、正しくは

ですね。

修正すると何もなかったかのように動き出しました! よくわからない動作をし始めたときは真っ先にDOCTYPEを確認すべきですねorz

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

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

$(window).height()が効かなくてハマッタことについて – ひよっこPGの技術メモ・英語・ギターのブログ。

$(window).height()が効かなくてハマッタことについて – ひよっこPGの技術メモ・英語・ギターのブログ。

はてブ数

http://buzzword111.hatenablog.com/entry/2013/10/14/030517

まず、$(window).height()が効かなくなったと知ったキッカケについて書きます。 DB処理などを追加した後にモーダルウィンドウの位置が変になりました。 ブラウザ : Firefox 24.0 上記動画のような状態です。 モーダルウィンドウの実装を見ると top:$(window).height() /2 -…

何か一言あれば!!

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

コメントを残す

2 件のコメント

    1. よっしー 投稿作成者

      これハマったらなかなか抜け出せないです(つд⊂)