Michael

I’ve just tested v3.21.1, which I believe is meant to fix this issue but for me it doesn’t.

I see a small change in CSS, which has no effect:

# v3.20.0
.lazyload, .lazyloading {
  ...
  width: var(--smush-placeholder-width) !important;
  ...
}

# v3.21.1
.lazyload, .lazyloading {
  ...
  width: var(--smush-image-width, var(--smush-placeholder-width)) !important;
}

–smush-image-width is undefined, so I get the same behaviour as before.

Is this issue meant to be fixed yet?

Thank you very much. I have been able to reproduce the problem on a new wordpress site with the default Twenty Twenty-Five, with no plugins other than Smush.

To reproduce:

• Ensure Smush’s lazy load feature is enabled
• Ensure there is enough content and images on a page to invoke Smush’s lazy load feature (confirm by checking at least one off-screen img tag has the class: “lazyload”)
• Apply the following CSS

img {
  max-width: none;
  width: 100%;
}

• In a narrow browser window, load the page
• Before scrolling down, try to scroll to the right
  • Expected behaviour: you should be prevented from scrolling horizontally because all content is contained within the browser window
  • Observed behaviour: you are able scroll to the right because an image not yet lazy-loaded by Smush takes up more horizontal space than the window width
• To confirm that Smush’s lazy load feature is causing this observed behaviour:
  • Scroll down until all images are lazy-loaded and observe that expected behaviour is restored
  • Deactivate Smush’s lazy load feature, reload page and observe that expected behaviour is restored

Let me know if you need more information.

What are the chances… Michael Clarke talking to Imran Khan!

Thanks for the reply, I understand wanting to replicate the issue on your end. I’ll try to provide as much information as I can…

• This is a custom coded website. No page builders. Minimal plugins.
• Before image: https://we.tl/t-UP8ryF3X15
• After image: https://we.tl/t-7vcPA7M1cn (note how content is pushed to the right)

I believe you can reproduce by:

• having an image that is off-screen (and not lazy-loaded yet) with a large width attribute (eg <img width=”1000″…> )
• Theme CSS that targets the image tag and sets the width as a percentage, eg:

img {
  width: 100%;
}
...
<img width="1000"...>

• a browser window with a small width (eg 500px)

What I then see is:

• Smush adds to the img tag:

<img class="lazyload" style="--smush-placeholder-width: 1000px...>

• Smush’s new CSS (that I posted earlier) is applied, in particular:

.lazyload,
.lazyloading {
  ...
  width: var(--smush-placeholder-width) !important;
  ...
}

• Note the value of “–smush-placeholder-width” from the img tag attribute (1000px) and “!important”. This will override the theme’s CSS of “width: 100%;”
• The image incorrectly takes up 1000px (horizontally) instead of approximately 500px and other page content is also not contained within the browser window
• Once the entire page has been scrolled to and all images lazy-loaded, all img tags will have had their “lazyload” class replaced with “lazyloaded”
• Smush’s new CSS is now not applied (since there are no “lazyload” or “lazyloading” targets) and all content is correctly rendered within the bounds of the window (via the theme’s original “width: 100%;”)

I hope this is enough information for you to investigate.