はてなブロググループスクロールの不具合

先日からはてなブログについていくつかの不具合を見つけているが、今日だけでも数個の不具合を見つけた。

今日だけでというのは実際に正しくはなく、先日から不具合に気がついてはいたものの、使えなくは無いのでそのまま使い続けていた。だが、不具合を見つけることが多くなってきたのでいくつか報告しておこうと思う。

今回はとりあえず、はてなブロググループについての簡単な不具合。ブログの投稿画面にもいくつか見つけているが、それは条件が少々複雑だったりするので、今後まとめることにする(多分)。
私が見つけている不具合の多くはXGA等の低解像度環境(昨今のPCから見た場合の低解像度)で起こる。書き込みや閲覧環境に条件を設けているのかもしれないが、そうであればこれは「不具合」ではなく「仕様」となるかもしれない。だが最低閲覧環境の記載を見つけることが出来なかったので「不具合かもしれない」こととして報告しておく。

「へんな会社」のつくり方 (NT2X)

作者: 近藤淳也
出版社/メーカー: 翔泳社
発売日: 2006/02/13
メディア: 単行本
購入: 62人クリック: 1,985回
この商品を含むブログ (1100件) を見る

不具合確認動画

実際に起こる不具合を動画で録画した。この動画を見ればわかりやすいかと思う。

不具合の再現手法

XGA程度の解像度のモニタや、ウインドウサイズをそれ以下にしたブラウザにてDjangoグループにアクセスする(参加者が少ないグループであればどこでもいい)。そして、そのページの最下部までスクロールさせようとする。

そうすると、動画のように最下部までスクロールされずにスクロール位置が跳ね上がる。ブラウザウインドウのサイズが小さい状態でフッタにスクロールしようとすると、サイドメニューのアドセンスがスクロールに追従しようとしてスクロール戻りが発生している様子(未確認)。
サイドメニューよりコンテンツエリアの表示が長い、投稿が十分にあるグループではこれは再現しない。例えば音楽グループでは現時点では再現せず、アドセンスエリアが追従してスクロールされる(ブログの書き込みにより左右されるかと思う)。

原因

少々調べてみようかと思ったがこんな時間なので辞めた。途中まで調べてみたのははてなブログ構成スクリプトのコメントが生々しいに書いた通り。

およそ、このJavascriptファイルの5175行目からの当たりに問題があるかと思う。

        var onScroll = function() {
            var container_offset = $container.offset();
            var scroll_top = $document.scrollTop();
            var target_height = $target.height();
            var page_container_top = $page_container.offset().top;
            var page_container_height = $page_container.height();

            if (scroll_top + page_container_top < container_offset.top) {
                // 上で固定
                $target.css({
                    position: 'static'
                });
            } else if (!enable_bottom || (scroll_top <  page_container_height - target_height)) {
                // 真ん中 ついてくる

                $target.css({
                    position: 'fixed',
                    top: page_container_top,
                    left: container_offset.left
                });
            } else {
                // 下で固定 #containerの底辺に合わせる
                $target.css({
                    position: 'absolute',
                    top: page_container_top + page_container_height - target_height,
                    left: container_offset.left
                });

            }
        };