Lightgallery: images cut off at bottom sometimes until swiping all the way through gallery(BTW TY for lightgallery!)

[arshapro]

Hello - thank you for writing lightGallery! I am having a fairly simple issue that I'm having trouble solving. Images seem to load correctly however sometimes (maybe 1 in 10 times) they are being displayed sort of "cut-off" at the bottom sometimes. The reason I say they load correctly is because if I cycle all the way through the gallery when I return to the same image that was displayed cut off before - it displays the full image. Please see examples:


I'm not sure how to fix this. Is there a timeout i could set higher perhaps? I have reproduced this problem on my iphone and ipad in both chrome and safari. I have not had this problem on the desktop - but I'm only recruiting lightGallery for the mobile site - so that's not much help! Thank you again for writing this. I see you have declined donations in the past, but if you change your mind - I would be happy to make one. This is great code and I would like to help you - even if its only buying you a beer!

BTW - the test site for the mobile version is at www.francesmiddendorf.com/mobile26/mobile/images.php?qr=0
Updated:
www.francesmiddendorf.com/mobile/images.php?qr=0
-Alex

[arshapro]

I’ve moved the site to a faster hosting provider and that has reduced the frequency of this problem but it still does occasionally occur. The address has changed slightly. The new address is: www.francesmiddendorf.com/mobile
Thank you for any help!

[arshapro]

The links to the light galleries are at www.francesmiddendorf.com/mobile/images.php?qr=0

[sachinchoolur]

Hey @arshapro,
I'm really sorry for the delayed response. The links seem to be broken. Could you please provide the correct link to the gallery?

[arshapro]

Hello, Sachin (correct spelling?)! Thank you for checking! I changed the link and hopefully it will work for you now: www.francesmiddendorf.com/mobile/images.php?qr=0

It appears to be a problem when either the server or the client has a slow connection. I moved the site to a faster server. So that helped. Still, though, if i use my cellular connection from my phone I will have the cut-off images problem sometimes.

If you go to that link then you have to select one of the galleries. The galleries "Art of Scent", "Etchings" and "Disegni Dalle Poesie Di Cesare Pavese" seem to reproduce the problem most often because they're larger galleries.

I have only had this problem on my mobile devices. If I follow that link from my desktop then everything works as it should.

Here is a another image that shows sort of "cut off" towards the bottom:

[sachinchoolur]

I've tried multiple times but couldn't reproduce the issue.
I think it is not an issue of lightGallery, it doesn't crop images. If you still face the same issue, please try using progressive images instead of normal JPEG images

Please let me know if you have any questions

[xdadda]

Hi guys. Sorry to reopen this but I have exactly the same issue when trying to browse large images with my iphone on a slow connection. No issue from desktop (on same slow connection, tethering through the same iphone).
I'm developing an app with nuxtjs (vuejs SSR)
Backend: nodejs express server piping a readstream (so this should not be a problem with large files)
Frontend: lightgallery jquery
Issue: images cropped/ not fully loaded ... feels like there is a timeout

[adriandmitroca]

Facing the same issue with Safari and Chrome on iOS 12

[spirospiro]

Hello guys, actually i have the same problem with safari on my iphone 5s, on the desktop version of the website all works perfectly

[adriandmitroca]

I will give my virginity for any clue how to fix this.

[brunoald]

I'm facing the same problem with Safari on iOS 12.

[adriandmitroca]

@spirospiro @brunoald

Have you got any luck with fixing this? The worst thing here is it hard to reproduce which makes it almost impossible to debug because it happens randomly.

[brunoald]

What worked for me was simply resizing images. After resizing them from
approximately 1600px wide to 960 they no longer were being cut. I also
applied a little compression (the original files were in very high
resolution and I used simply “high” instead).

Em seg, 11 de mar de 2019 às 18:04, Adrian Dmitroca <
[email protected]> escreveu:

@spirospiro https://github.com/spirospiro @brunoald
https://github.com/brunoald

Have you got any luck with fixing this? The worst thing here is it hard to
reproduce which makes it almost impossible to debug because it happens
randomly.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sachinchoolur/lightGallery/issues/745#issuecomment-471729062,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAjlYzcQqsC2TBL732Tbh7XyZF3sZrOtks5vVsTDgaJpZM4RdS0Z
.

>

Bruno Dias

[adriandmitroca]

I was thinking about the same solution - based on the dynamic gallery, serving different image URLs for mobile devices.

[ropic]

Same problem here, an ugly terrible fix is force reloading the image using event onSlideItemLoad.lg and then add to src image attribute ?123. You will see image cut, then after reload completes the render.

$lg.on('onSlideItemLoad.lg',function(event, index){
                current_img = $('.lg-current img');
                if(!current_img.attr('src').match(/123/))
                    current_img.attr('src', current_img.attr('src') + '?123');
            });

[chenkehxx]

I have the same issue now, I wonder if it's abuse the css3 transform, you know too much GPU accesslator may need too much memory.

[shahedurrahman]

Facing same issue, even with smaller images. Safari, iOS.

[Matt72]

Same problem here.
Images are cut off / not loading completely all the time in IOS 12, both ipad and iphone.
We were on version v1.1.4 so I tried Version: v1.6.12 (latest).
Problem persists.
Image size currently at 2560x1440.

Solution urgently needed.

[unitedworx]

sorry to comment on a closed thread but I am having the same issue as well! images appear to be cut off at the bottom. when I switch from portrait to landscape they show, show they are loaded but something is blocking them!!! Any real solutions to this? Its damn hard to debug this since it happens on my iPhone and my customers iPhone as well however it does not happen on an android device I tried nor on safari responsive design mode!

[superfein]

I thought I was going crazy! It's not just me! Running two websites with this exact issue. Tested in Chrome, Firefox, Edge on Windows 10 and Chrome, Firefox, Safari on MacOS Mojave. No problems on laptops/desktops. Tested on my Android phone in Chrome, no problem. Tested on iPhone 5s, 6 and 10 as well as several different iPads included the 12.9" iPad Pro using Safari mobile and Chrome mobile browsers with the exact same results as everyone has been complaining about. Images get randomly cut-off, or perhaps more technically accurate, I believe they only partially load.

See this thread about the exact same issue plaguing users on Xenforo: https://xenforo.com/community/threads/unfortunately-there-is-yet-another-lightgallery-problem-ios-mobile-safari-sometimes-crops-images.151339/

Interestingly, the images on the lightGallery demo pages work fine in iOS Safari, so there may be a perfect storm of issues causing this...like internet speed + server speed + mobile hardware etc.

[Tukan3]

Same problem, also only affecting iOS Safari.

[Tukan3]

Maybe a bit hacky but works for me most of the times:
$lg.on('onSlideItemLoad.lg', function (event, index) { if (isIos) { setTimeout(function () { $('.lg-current .lg-object').removeClass('lg-image'); setTimeout(function () { $('.lg-current .lg-object').addClass('lg-image'); }, 10); }, 300); } });

[unitedworx]

Has anyone tried the above hack ?

I will give it a go it’s a big problem now affecting several clients!

if I don’t solve it I will need to migrate to another solution.

Love light gallery, been using it for years and works beautifully except this weird image loading issue

[indovsky]

2020 and I have this same problem. @Tukan3 fix don't work for me.
I made something like this:
`var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
for (var i in data) {
data[i].src = data[i].src + '?size=644x480';
}
}

if (iOS) {
lg.on('onSlideItemLoad.lg', function (event, index) {
var $lgObject = $('.lg-current .lg-object');
if ($lgObject.hasClass('lg-fixed')) return false;

                $lgObject.css('max-width', 'none').addClass('lg-fixed');
                setTimeout(function () {
                    $lgObject.css('max-width', '100%');
                }, 300);
            });

}`
and that's work but it's a disgusting solution

[adriandmitroca]

What does the lg-fixed class does, @indovsky?

[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');

});
````

[indovsky]

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');

});

Dude, it's works perfectly!

[dijkermans]

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');

});

I'd suggest using all prefixes:

-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
transform: none !important

[dijkermans]

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');

});

Maybe you could just use this line because it skips the zooming intro animation as well?:

startClass:'',

[adriandmitroca]

startClass:'',

Indeed, it looks like equivalent and obviously is much more elegant as it doesn't need any custom code on top of it.

@dijkermans