Magnific popupでギャラリーを表示させたいのですが、特定のスマホ端末、ブラウザ(chrome)上でギャラリーの画像サムネイルを開くと画像だけがページのかなり下に表示されてしまいます。
他の端末では、サムネイルを開くと画面上の真ん中に表示されるのですが…。
Magnific Popup demo
https://dimsemenov.com/plugins/magnific-popup/
こちらのLightbox Galleryタイプのものを使用していますが、このデモは同じ環境でも正常に表示されています。
chromeデベロッパーツールのLG optimus L70、また実機でもLG系のみ表示がおかしいので、かなりマイナーな問題かもしれません。
ギャラリーを開いた時のこちらのhtmlの挙動ですが、
通常であればwidth/heightがこのように画面内に収まるサイズで表示されるのですが
<div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor mfp-img-mobile mfp-ready"
tabindex="-1" style="top: 569px; position: absolute; height: 640px;">
自分の環境だとこのようになります。
<div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor mfp-img-mobile mfp-ready"
tabindex="-1" style="top: 3297px; position: absolute; height: 4496px;">
html内のjsコードはこのようにしています。
jQuery(document).ready(function() {
jQuery('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1], // Will preload 0 - before current, and 1 after the current image
mainClass: 'mfp-fade', //フェードインアウトについてクラスを設定
removalDelay: 300, //ポップアップが閉じるときの遅延時間を設定
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small></small>';
}
}
});
});
初歩的な問題かもしれませんが、どなたか対処法がわかる方、ご教授いただけましたら幸いです。