スマートフォンサイトのlightbox的なモーダルの実装

CSS3のみでModalを実装する機会があり、 こちらで公開していただいたいるサンプルが、 とてもスマートで参考なりました。

iPhoneでためしてみたところ、スクロールするとモーダルの半透明背景が、 height100%がうまくきかず、背景がきれてしまう、という事象に遭遇しました。

いろいろやった結果、回避策です。

abosoluteをfixedに変更

ただiPhoneでのFixedサポートはつい最近ということもあり、ちらつきが発生します。 iOS4.3以下ではうごきません。 AndroidはFixedがサポートされていることもあり、安定してうごきます。

.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    display: block;
    position: fixed;　// absolute fixedに変更
    background: #000;
    opacity: 0.5;
    z-index: 5;
}

heightを100%より長くする

300%あたりまでのばしたところのばしてもスクロール時に切れることはなくなりました。

.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 300%; // 100%を300%に変更
    display: block;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}

二つ目の方法が今のところベターかなと思うのですが、 最善とはとても思えないのです。 これ以外に今のところ方法が浮かばなかったりします。

もっといい方法あるよ！！って人いらっしゃいましたらコメントとかいただけると嬉しいです。

追記: 最終的にfixedにしてオーバレイのscrollイベントを無効にすることで完璧ではありませんがそこそこ良い感じになりました。 どこかのタイミングでパッケージ化してGithubにでもあげようと思います。