我有一个网站。在其中一页上，我集成了Light Box Image Gallery插件。在所有其他支持Safari的浏览器上都可以正常工作。我在Safari中面临的问题是，当您单击任何图像时，它将触发全屏显示，但是在打开和关闭页面UI失真的图像库时出现过渡问题。
不幸的是，我已经尝试过所有可能的方法，甚至通过github的灯箱画廊问题跟踪器也无法找到任何解决方案。任何帮助将不胜感激。
<li class="wow fadeIn" data-wow-delay="0.5s"><a data-toggle="pill" href="#img_gallery">gallery</a></li>
<div id="img_gallery" class="tab-pane fade">
<div class="residential_gallery">
<h1>The Pavilion Image Gallery</h1>
<hr>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation0.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation0.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation1.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation1.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation2.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation2.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation3.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation3.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/Pavilion_modal.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/Pavilion_modal.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_1.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_1.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_2.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_2.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_3.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_3.JPG" /></div>
</div>
</div>
</div>
<script>
$('.images_gallery, .residential_gallery').lightGallery({
selector: '.item',
mode: 'lg-slide',
cssEasing: 'cubic-bezier(0.25, 0, 0.25, 1)',
backdropDuration: 150,
escKey: true,
controls: true,
mousewheel: true,
thumbnail: false,
width: '100%',
height: '100%',
download: false,
animateThumb: true,
counter: true,
closable: true,
enableDrag: true,
zoom: false,
fullScreen: false
// scale: 5
});
var $lg = $('.images_gallery, .residential_gallery');
$lg.on('onAfterOpen.lg', function() {
$lg.data('lightGallery').modules.fullscreen.requestFullscreen();
});
</script>
Not showing and expected error messages on the console however only on a Safari Browser gallery transition issue can be seen.