新年明けましてどもです。

最近ナゾノクサ系が愛しい餅。です。
キレイハナも慣れると可愛いなぁ。
但しクサイハナ、おめーはダメだ(´・ω・｀)

今回、iPad用Webシステムのコーディング修正を依頼されました。
自分で書いてないコーディングの修正は結構厄介ですが、概ね問題なく完了。

ただ一点、html,body:height:100%にしているのに僅かに縦スクロールしてしまう問題を除いて。

え、いや何故？　Chromeで見たらちゃんと100%やん…

さぁて、躓いた。

PCのGoogleChromeで見ると、ちゃんと縦幅は100%です。
念のため他のブラウザでも見てみますが、問題なし。

とはいえ、htmlのheightが効かないiPad特有のバグなんて存在するのでしょうか。
そうであれば、これまで手がけてきたサイトがバグってないか確認する必要すらあるのでは…

コーディング側のミスであってくれ。
そう思いながらも、バグの可能性について調べてみました。

ほんまにバグやった。（但し画面が横向きの場合だけ。）

iOS7.0.4 の最新にアップデートした後で、iPad を横向きにした状態、 つまりランドスケープモードにして再度確認してみたら、 なんだかスクロールバーのようなものが出て、タッチして上下にスクロールが出来てしまいます。
～中略～
html 要素に対して height: 100% のスタイルを充てた状態だと、window.innerHeight は 672px ですが、window.outerHeight は 692px になるというバグがあるようです。

girigiribauer.com

なん…だと…

横画面を前提に縦横100%、なんて条件でコーディングすることが今までなかったので完全に寝耳に水。

対処法

@media (orientation:landscape) {
    html,
    html body {
        position: fixed;
        bottom: 0;
        top:100%;
        height: 672px !important;
    }
}

強制的に高さを672pxに設定。fixedで固定の刑です。
ちなみにこのバグ、iOS8では直っているようなので最新OSのみを対象とするなら無用の処理です。

参考サイト：Stack Overflow