colorboxでモーダルウィンドウの中身がスクロールできなくなる現象を解決する方法

JQueryプラグインのcolorboxで下記のように

$(".iframe").colorbox({iframe:true, fixed:true});

モーダルウィンドウの位置を固定に設定し、中身をiframeで表示するようにした際に、iOSのsafariやFirefoxにおいてモーダルウィンドウの中身がスクロールできなくなる現象が起こりました。

この現象を解決する方法を見つけましたので共有いたします。ちなみにcolorboxのバージョンは1.6.4です。

◆解決方法◆

colorbox.cssを開いて、下記のコードを追加します。

#cboxWrapper{-webkit-overflow-scrolling:touch;}

これだけでiOSのsafariでもiframeがスクロールができるようになりました。

カラーボックス以外のライトボックス系のプラグインでも同じような問題が起こるかもしれないので、まずはこの方法を試していただければ幸いです。 参考サイト：http://mamewaza.com/support/blog/iframe-scrolling-on-ios.html