fancyboxでなぜか親ページの表示位置がページ先頭に戻ってしまう

jQueryプラグインのfancyboxにて、サムネイルの画像をクリックした際、なぜか親ページ(背後に見える元のページ)の表示位置がページトップ(先頭)に戻ってしまう現象に遭遇。

縦に長いページの下の方の画像の場合、拡大写真を閉じるとページの一番上に戻されているので、元のクリックした位置に戻るのが大変。
大変というか、ユーザビリティ的に大いに問題あり。

原因究明に結構ハマりました。で、原因はCSSにありました。
↓これ

html,body{height: 100%;}

ページ要素が少なくてスカスカのときでも、フッター要素がウインドウの一番下に表示されるようにするために必要な指定でしたので。
今となってはそんなスカスカ要素のページは存在していないし、仮にあってもこんな罠にハマるくらいならば、デメリットの方が大きいですね。
速攻削除です。

ただ、どういう原理でページトップに移動してしまうのか気になったので、検証用のシンプルなページを作成して、同じCSS設定下で動くオリジナルのモーダルウインドウ(fancyboxのような機能)を作成して検証してみました。
すると、上記CSS記述(html,body{height:100%;})があっても、別に問題なく希望通りに動きました…。
あら、そうなの。

念のため、検証ページにもfancyboxを適用。ほかに邪魔する可能性のあるスクリプトやCSS記述が極力ない状況でテストしてみました。結果、やはり問題発生。
なので、html,body{height:100%;}が、モーダルウインドウ全般にダメというわけではなく、fancybox固有の問題ということでしょうか。バージョンの問題なのか、それともjQuery本体のバージョン相性問題なのか、今回はそこまで深く追求はしませんでしたので、「バグ」と断言できるものかどうかはわかりません。

fancyboxで同じように悩んでいる方がいましたら、何かの参考になればと思います。

HTML5&CSS3 | , |
  • ユウスケ

    同じ状況にハマッてました。助かりました^^

    • http://doli.jp doli

      ユウスケさん

      返事が遅くなってしまいすみません!
      (最近ブログをほったからかしなのがバレますね)
      お役に立ててなりよりです。

  • サトシ

    参考にさせて頂きました^^
    悩んでたので助かります。

    • http://doli.jp doli

      サトシ様
      コメントありがとうございます。プラグインも変なところでハマると、自作しちゃった方がいい場合もありますね…。
      このブログがお役に立てて幸いです。