Lazy Load creating space on webpage

  • When loading “shorter” pages, i.e. those that do not have a scroll bar, Lazy Load seems to create blank space to the right of the page, which only goes away when I drag the browser window to resize.

    1: Initial load: https://imgur.com/yBRMQNS

    2: Close-up of the issue: https://imgur.com/LrrlHv6

    3: After dragging browser window to resize in any direction, page automatically snaps to fill the space properly: https://imgur.com/ymyPSzd

    Is there some way to prevent this please?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author WP Media

    (@wp_media)

    Hi @thebarebutlers

    Usually, this kind of issue shouldn’t be related to LazyLoad and would be caused by the CSS used on the site.
    Please verify this by temporarily deactivating LazyLoad plugin.

    If the issue is resolved when the LazyLoad plugin is deactivated, please write back and share what browser and device I can use to reproduce the issue.
    Currently I wasn’t able to reproduce the issue and the spacing is not appearing. Here is the screenshot: https://jmp.sh/pstLrVn

    Kind regards,
    Natalia

    Thread Starter thebarebutlers

    (@thebarebutlers)

    Hi Natalia

    Thanks for your response. Prior to posting, I verified the issue by deactivating LazyLoad, refreshing the page (no issue), then reactivating LazyLoad, refreshing the page, and the issue reappeared. For certainty, I have repeated the same process now, with the same results.

    The result is occurring on my iMac 5K – latest OS (non-beta) in both Google Chrome and Safari.

    Let me know if you have further difficulty replicating the issue.

    Thanks for your time!

    Plugin Contributor WP Rocket

    (@wp_rocket)

    Hi !

    Thank you very much for your reply. I hope you’re having a good day.

    We’ve tested this matter and couldn’t reproduce it. Please see below:
    Full-size image → https://jmp.sh/0x6OaM0

    Could you please share more info:
    1. If there’s a set of steps to be able to reproduce the issue please list them all

    Thank you for your time and patience on this matter. I’ll be waiting for your reply. I hope you have a great day!

    Regards,
    Jorge

    Thread Starter thebarebutlers

    (@thebarebutlers)

    Hi Jorge

    Thanks for your reply.

    The key step to reproducing this issue is that the page content is shorter than the browser height (i.e. that no scroll bar is needed).

    It is difficult to tell whether this is the case based on the screensavers provided to date.

    The issue occurs on “shorter” content pages, such as barebutlers.co/book or barebutlers.co/contact, but not on other pages such as the homepage. Looking closer at this, it seems to occur when the page content is longer than the browser window when loading (so a scroll bar is factored into the layout), but the actual content is shorter than the window size, thus leaving the space of the scroll bar.

    Please let me know if you replicate the issue, with the benefit of this description.

    Thanks again for your time.

    Plugin Author WP Media

    (@wp_media)

    Hello again @thebarebutlers

    I checked your website https://barebutlers.co/book/, but it does not seem to be related to Lazyload Plugin.

    As I see, it is an issue with Elementor trying to calculate the width of a section element every time the window is resized, please see: https://jmp.sh/k4YPd41

    Kind regards,
    Sandy

    Thread Starter thebarebutlers

    (@thebarebutlers)

    Hi Sandy

    Please see a video demonstrating that the issue only occurs when loading with LazyLoad enabled: https://youtu.be/T_64GJIk1s8

    Should I be disabling LazyLoad on certain page elements, and if so, is there a guide for this?

    Thanks!

    Thread Starter thebarebutlers

    (@thebarebutlers)

    Hi Sandy – just following up on this please.

    Plugin Contributor WP Rocket

    (@wp_rocket)

    Hi @thebarebutlers!

    I couldn’t replicate the issue on my end.

    If you are still experiencing the issue, you will need to disable LazyLoad on the affected pages.

    We don’t have a UI for that, but you can do it programmatically by using the following filter: 

    add_filter( 'do_rocket_lazyload', function() {
    if ( is_page(99) ) {
	return false;
    }
    return true;
} );

    Change the 99 by the page ID you want to target.

    Kind regards,

    Adame

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Lazy Load creating space on webpage’ is closed to new replies.