ColorboxがiOS版safariでズレる


現象

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",
           });
        }
    });