スマホ・iPadでのcolorboxのiframe表示について

Question

####Colorboxを使用し、WordPressで作成したページをiframeで表示したい。
wordpressで作成した記事の一覧ページから、jquery.colorboxを使用し、iframeで個別ページのhtmlをライトボックスで表示させています。

####発生している問題
PCでは問題なく表示されていますが、
iPadやスマホで見るとiframe内の要素が正常に表示されず、スクロールもできなくなります。
また、iframe内でgooglemapをiframeで読み込んでいるのですが、iPadでiframeを表示させるとgooglemapのアプリが起動してしまいます。

Answer 1

http://www.infoscoop.org/blogjp/2014/04/22/mobile-browser-iframe-scroll-problem/
ココ参照。

Comments

[kiro]

参考URLを拝見し、対策したところ、中身の要素は見えるようになりました。ありがとうございます。

しかし、依然としてライトボックスを開いた瞬間、googlemapがアプリで開いてしまいます。これはIOSのGoogleChromeのみ起こる現象らしく、端末側の設定に依存するとのことなのですが、これを回避するのは難しいのでしょうか？

また、新たな問題として、ライトボックスiframe内でslick.jsを使い画像のスライドショーを表示させているのですが、最初に開いた1回だけ画像の高さが1pxくらいの筋になってしまいます。二回目以降は正常に表示されるのですが・・・。

[kiro]

自己解決しましたので、報告までに。

GoogleMapが開いしまうのはもう仕様上避けられないと諦め、
slick.jsを使用するスライドで画像の高さが正常に取得できない状況は
画像を読み込んでからスクリプトを実行するというjquery
「imagesloaded.pkgd.min.js」を
使用することで正常に表示されるようになりました。