Image not displayed after removing display:none

[cywtf]

I have some responsive images on the viewport that are inside a container with a display: block.

<figure class="image-container">
        <img
        alt="<?php echo get_the_title(); ?>" 
        data-sizes="auto" 
        src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/pixel.png" 
        data-srcset="
        <?php echo $image['sizes']['small']; ?>  512w, 
        <?php echo $image['sizes'][ 'medium' ];?> 720w, 
        <?php echo $image['sizes'][ 'large' ];?> 1200w, 
        <?php echo $image['sizes'][ 'xlarge' ];?> 1400w" 
        data-src="<?php echo $image['sizes'][ 'large' ];?>" 
        class='lazyload' />
</figure>

.image-container{
    position: relative;
    display: block;
    opacity: 1;
    z-index: 999;
    background-color: rgba($black, 0.05);
}

With certain interactions, this container receives a class with display:none, and then later on this class is removed.

.image-container.inactive{
    position: relative;
    display: none;
    opacity: 0;
    z-index: 9!important;
    pointer-events: none;
}

However I figured out that the responsive images don't reappear after that. What should I do to make them visible again after removing the display:none? The background color is showing up, the images are not.

[aFarkas]

Actually you shouldn't need to do anything. Can you add the following CSS to your images:

.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

If this doesn't work you can try to invoke lazySizes.autoSizer.checkElems() and/or lazySizes.loader.checkElems(), but you shouldn't need to do this. If this changes anything, I will need a testcase to find the error/bug?

[ikovacic]

Hi @aFarkas,

thanks for great script.

I've just implemented it to my site and i have problems with some images on iOS. I have tutorials with multi-image steps and I change image visibility (display: none > block).

Example: https://www.ucionica.net/aplikacije/kako-sprijeciti-automatsko-offloadanje-aplikacija-na-iphoneu-6276/

I tried with fix that you mentioned in your last comment but it's not working:

jQuery('.js-multiImage').on('click', function(e){
    e.preventDefault();

    var target = jQuery(this).attr('href');

    jQuery(this).parent().addClass('is-active').siblings().removeClass('is-active');
    jQuery(target).show().siblings().hide();

    lazySizes.loader.checkElems();
});

When I call lazySizes.loader.checkElems(); directly from browser console, images display.

My temporary fix is: dispatchEvent(new Event('scroll'));

Do you have any idea?

Thanks and BR, Igor