BLOG

JqueryColorBoxのバグ? 高さが切れてしまうときの対処法

PUBLISHED AT 01/13/2015 / IN CATEGORY web

colorbox

最近jqueryColorBoxを使う案件が多く、 バグ?というかちょっとハマってしまった事をメモしておきます。

 

colorBoxってwordpressのプラグインにもあるし、画像をポップアップさせるのにとっても便利ですよね。

画像をポップアップするだけなら、ただプラグイン入れて、呼び出しコード書くだけなのでなんの事はないんですが、ajaxで他ページをポップアップさせたい時に、バグなのか僕の使い方が悪いのか分かりませんが、ページが下まで表示されない現象に遭遇します。

 

下の画像のような感じですね。途中で切れちゃう。

この現象が起きるのは僕だけなんですかね?調べても全然情報がなかったので、力技で解決してやりました。

 

colorbox_1

 

前にも同じような現象に見舞われたのですが、そのときは気づいたら問題なく表示されるようになっていました…

で、今回はiOSのchromeでこの現象に遭遇しました。

今まではブラウザ更新後又は最初のアクセスで、最初の1回のみ、このように高さが切れてしまって、ポップアップを消してもう一度クリックでポップアップさせると問題なく表示されたりと不安定ながらなんとか表示できていたのですが、

今回のiOSのchromeがなかなかの強者でして、こいつだけが何度やっても上手く表示できない。

cssでheight100%にしたり!importantつけたりあれやこれややってもやっぱり表示されない。

 

pc側の表示はどのブラウザも問題なし。

iOSのsafariも問題なし。

 

そこで高さをpx指定でとってみる。

するとなんとか表示できました。

表示できたというか、heightのpx指定は効いているという感じです。

下が余ったり、微妙に足りなかったり…

 

しかし、コンテンツの高さが何pxになるかなんて、wordpressの投稿ページなので絶対分からない。

長いときもあれば短いときもある。

 

レスポンシブで作っているのでディスプレイサイズによってもコンテンツの高さが変わってくる。

色々悩んだあげく、かなりせこいが、かなり多めに高さを指定して、下が余ったらご愛嬌でごまかそうと思ったが、やっぱり気持ちわるい。

 

そこで、iOSのchromeでどれだけ使ってる人いるのか分からないが、スマートフォン側のブレイクポイントの中にchrome用のハックを書く事にしました。

 

そしたら、なんとなんと、きちんと表示されているではないですか。

 

colorbox_2

 

できた!

なぜか出来た!

 

@media screen and (max-width: 640px) {
/* スマートフォン用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* スマートフォン用chromeハック */
	#stylewrap{
		height:3000px;
	}
}
}

 

上記のコードで一応解決しました。

しかもポイントはheightを3000pxもとっているところ。

かなり多めにとったのに、きちんとフィットしてます。

ためしに更に多くheightをとってみましたが、問題なし。

更に試しに、heightを1000pxにしてみると、さすがに高さが足りなく下が切れてしまいました。

 

なので、とりあえず多めに高さをとる事で解決しました。

本当にこれでOKかは分かりませんが、表示できてるので良しとしてしまいましょう。