現象
ColorboxがiOS版safariで、上下中央に寄らないことがある。
環境
・レスポンシブ
・モーダルでyoutubeを再生する
原因
safariのウィンドウサイズが変化するため
解決策
colorboxにpositionを再計算させる。
最初はこちらを参考に動かしていたが、
動画の読み込みの関係(?)なのか、動画部分のみ上手くいかず。
setTimeoutでタイミングをずらすことで、上下中央になった。
html
<a href="xxxx" class="hoge"><img src="xxx.jpg" alt=""></a>
js
$(window).on("resize load" , function(){
if( parseInt( $(window).width() ) < 740 ){
//スマホ
$(".hoge").colorbox({
iframe:true,
width:"99%",
height:"90%",
onComplete: function() {
setTimeout(function(){
$.colorbox.position(0);
},1000);
}
});
} else {
$(".hoge").colorbox({
iframe:true,
width:"1000",
height:"613",
});
}
});