The description box doesn't expand to the full width when the image is not preloaded

[inacho]

Describe the bug
The description box doesn't expand to the full width when changing the slide and the image is not preloaded yet.
This issue happens a lot when you flick through photos in a gallery with images that have good quality (as they take longer time to completely load).

Are you able to reproduce the bug in the demo site
Yes

To Reproduce
Steps to reproduce the behavior:

In order to reproduce the bug easier, use a browser with an inspector that allows to throttle the network speed. For instance Firefox.

1. Open a gallery with Firefox
2. Open the inspector and go to the "network" tab
3. Activate network throttling (for example "Regular 2G")
4. Open one slide, then change to other slides quickly

Expected behavior
The description should expand to the same width of the image instead of being tiny

Screenshots

Video

bug.mov

[gingerchew]

Hey there @inacho,

Thanks for submitting this bug report!

I can confirm I'm seeing this issue too on Firefox 92.0.1 on my Macbook when I set the network throttle to 2g.

Just as a "Let's see how bad I can make it", I was able to get this to occur:

Where the first and last slides both are given the class of .current. I don't have the time right now to do any proper testing, but this at least confirms that the bug can occur.

@inacho in your testing/coding, did you run into any solutions or workarounds? Were you able to get it to occur on actual devices or only in an emulator like Firefox Dev tools?

[inacho]

Hey,

I'm using the following workaround:

Basically moving the div.gslide-description inside .gslide-media instead of having it as a sibling, so when .gslide-media expands, the description will expand as well.

Javascript:

let customSlideHTML = `<div class="gslide">
    <div class="gslide-inner-content">
        <div class="ginner-container">
            <div class="gslide-media">
              <div class="gslide-description">
                  <div class="gdesc-inner">
                      <h4 class="gslide-title"></h4>
                      <div class="gslide-desc"></div>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>`;

let glightbox = GLightbox({
    slideHTML: customSlideHTML,
});

CSS:

.glightbox-clean .gslide-description {
    max-width: 100% !important;
}

.glightbox-clean .gdesc-inner {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.glightbox-clean .gdesc-inner a {
    display: inline-block;
}

Until I applied the workaround the issue was happening to me with regular jpegs of 1200x800 pixels (2400x1600 size for retina devices) hosted in Amazon S3 with Cloudfront as CDN (home internet speed is 1Gbps).
This is the website where the issue was happening: https://nacho.tokyo/en

The images used in the example site are only like 25KB, and there are only 3. That's way is more difficult to reproduce the issue there unless you throttle the network.

[ncla]

Thanks inacho for the idea. Unfortunately your workaround comes with a regression on mobile viewports where description overlays the slide (upon changing slides or interacting with the slide). Transform gets applied to gslide-media and as such the parent stacking context changes to that element causing description to be positioned incorrectly.

I looked a bit at the source code and one way to fix this decently would be a proper detection of when content has loaded in. The calculation is coming from resize method that calculates description max width, which is done with a setTimeout delay of 100. Not reliable.

glightbox/src/js/glightbox.js

Lines 564 to 566 in 7bc74f9

	setTimeout(() => {
	this.resize(slide);
	}, 100);