レスポンシブ対応Lightbox系プラグインを動かす際にかかった罠

Lightboxは簡単且つ便利だけど、スマホ用のUIには対応していないというのは有名な話です。
なので、それに代わるものを何とか見つけようと、がんばって色々と探していました。
そして、評価が高く、レスポンシブ対応Lightbox系プラグインといえばこれ!となっているSwipebox
評判を見て回ったら、何だか設置が簡単そうなrlightbox。 この2つを設置してみたのですが

私が伸びたい心境です
こうなるべきところが

撮り貯めた社長ギャラリー
こうなってしまいました。

ページの作りによって、上に行ったり下に行ったりとバラバラですが、決してちょうどいい場所には行ってくれません。

何が問題なんだろう、とGoogle Developerのお力を拝借し、試行錯誤してみました。
そして分かったのですが、実は対象のページには、このようなcss設定をしています。

html { font-size: 62.5%; }

body {
font-size: 14px;
font-size: 1.4rem;
}

文字サイズの単位であるpxを簡単にemに換算するための手段なのですが
この設定、Google Chromeでは無視されることがあるそうです。

なので、head部分に、このような仕掛けをしていました。

<script>
$(function(){
    //chrome用の分岐処理
    var _ua = (function(){
     return {
        Blink:window.chrome
     }
    })();
     
    if(_ua.Blink){
        //chromeの文字サイズ対策
        document.body.style.webkitTransform = "scale(1)";
    }
});
</script>

この処理によって、Google Chromeで閲覧する場合、自動的にbodyに -webkit-transform:scale(1) が設定されます。
拡大縮小の指定を等倍にする設定なのですが、実はこれによって、position:fixed が無効になります。
Lightboxの窓の表示位置は、大体 position で指定されることが多いようなので、上の画像のような表示になってしまうようです。

script を削除したら、表示が正確になりました。

削除後も、今のところ文字サイズに問題はないようです。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ