Lightgallery: Images in lightGallery lightbox sometimes only half loads on iOS devices

[superfein]

Describe the bug
On iOS devices (tested on iPad Pro, and iPhones 5, 6 and 10) when in the lightGallery lightbox the main image in the slider often doesn't fully load. So the top half of the image loads but not the bottom half. Sometimes only the top third of the image loads. About 40-50% of the time the full image loads. This is NOT a problem on non-mobile devices. I have not tested on Android devices.

Desktop:

• OS: Windows 10, MacOS Mojave
• Browser: Chrome, Firefox
• Version: Latest version of both browsers.

Smartphone:

• Device: iPad Pro 2018 model, iPhones 5s, 6 and 10
• OS: iOS latest
• Browser: Chrome mobile, Safari mobile
• Version: Latest version of both browers

[etoplife]

actually, v. 1.6.12

[fatklass]

I have the same iOS problem, please fix it

[ngochai97nguyen]

same issue.

[etoplife]

increase "preload" option (3 for me) fix me
{ preload: 3 (may be 2 will be enough) }

[CameronWard301]

increase "preload" option (3 for me) fix me
{ preload: 3 (may be 2 will be enough) }

This didn't work for me :(

[masterrjj24]

Hello,

I have the same bug tested on iphone 6 and iphone 7 on this website
Can you help me please... thanks

[danielvdbilt]

Hi, same issues here. Preloading doesn't fix it. Only fails on zoom-able images.

[ghost]

Hi, I found a fix for this issue. It seems on iOS the scale3d transform property causes images to improperly display (appearing cut off) when it is applied before the image is fully loaded. Here is how to fix this:

css:

.lg-off .lg-object {
    transform: none !important
}

jquery:
```
$lg.on('onBeforeSlide.lg',function(event){

$('body').addClass('lg-off');

});

$lg.on('onSlideItemLoad.lg',function(event){

$('body').removeClass('lg-off');

});
````

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.