スマートフォンで要素の高さを%指定した際に表示がおかしくなることがある

DEMO

偶然みつけました。PCのブラウザだと.imgのheightがgreenの80%になりますが、スマートフォンのブラウザだと.imgのheightがbodyの80%になります。

発生条件

1. 親（#green）の高さが%指定で、その親（#red）の高さがauto
2. 自分自身（.img）はposition: static、親（#green）とその親（#red）はstatic以外

1, 2を満たすと発生する模様。

解決策

・自分自身（.img）のpositionをabsoluteにする
・親の親の高さ（#red）をJSで明示的に指定する

のいずれかで解決する模様

上記DOMOでは、.imgをタップした際に#redの高さをpxで指定するようにしているので、スマフォでも.imgをタップするとPCと同じ挙動になります。
ただしリサイズイベントには対応させていないので、ウィンドウをリサイズするとまたおかしくなります。