Smush v3.20.0 breaks layout

Resolved Michael
(@mclarkos)

9 months, 3 weeks ago
Hi there,

On a website I’ve had Smush installed and working for years, page layout is broken with the latest update (v3.18.1 is all good, layout has issues on v3.20.0). The problem on my site is that on smaller browser windows, content is not contained horizontally within the viewport.

When I comment out the following CSS that is inserted to the top of the page, my layout is fixed:
```
        .lazyload,
        .lazyloading {
            --smush-placeholder-width: 100px;
            --smush-placeholder-aspect-ratio: 1/1;
            width: var(--smush-placeholder-width) !important;
            aspect-ratio: var(--smush-placeholder-aspect-ratio) !important;
        }
```
This CSS is not present with Smush v3.18.1. Specifically, the line that causes an issue for me is “width: …”.

I don’t believe I can override this with my own CSS, so ATM I’ve rolled back to v3.18.1. But obviously I’d like to get back on to the latest version of Smush.

Is there a setting or some way I can avoid this CSS from being injected? Or would this need a patch in the plugin?

Thanks a lot.

Viewing 15 replies - 1 through 15 (of 15 total)

Plugin Support Imran – WPMU DEV Support
(@wpmudev-support9)

9 months, 3 weeks ago

Hello @mclarkos,

I am sorry to hear about the issue.

Can you share a bit more information so we can try to replicate the same issue on our end?

– Copy the site info and share it with us. Please refer to this screenshot to navigate the site health page: https://monosnap.com/file/sYDK2oqf7dUX2PrKxymcDfzbZRMl13. You can share the form export file and site info using pastebin.com — This way, we can identify the list of plugins or themes and try to replicate the issue using free resources.

– Also, please share before and after images of the site. You can take screenshots, upload them to Google Drive, and share the publicly accessible link with us.

– If any image appears broken after this, aside from layout issues, you can share the image or its dimensions so we can attempt to update it to the same size.

– The crucial part is the replication steps, too.

Once we receive some of this information, we will conduct further tests on our end to ensure this isn’t caused by any page builder or theme conflicts.

We look forward to hearing from you soon.

–
Kind Regards,
Imran Khan
Thread Starter Michael
(@mclarkos)

9 months, 2 weeks ago
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.
Plugin Support Nebu John – WPMU DEV Support
(@wpmudevsupport14)

9 months, 2 weeks ago
Hi @mclarkos,

Thank you for providing additional information.

I followed the steps that you mentioned; however, I wasn’t able to replicate the issue on a test website at our end. Would it be possible for you to share a page URL where we can observe the issue so that we can bring this to the notice of the Smush team?

If you are not comfortable sharing the URL publicly here, please feel free to email us at [email protected] using the following template.
```
Subject: ATTN: WPMU DEV support - wp.org

Please send:
– Link to your WordPress site
– Link back to this thread for reference (https://ww.wp.xz.cn/support/topic/smush-v3-20-0-breaks-layout/)
– Any other relevant URLs/info
```
Best Regards,
Nebu John
Plugin Support Patrick – WPMU DEV Support
(@wpmudevsupport12)

9 months, 1 week ago

Hi @mclarkos

We haven’t heard from you in a while, I’ll go and mark this thread as resolved. If you have any additional questions or require further help, please let us know!

Best Regards
Patrick Freitas

Thread Starter Michael
(@mclarkos)

9 months, 1 week ago

Sorry for the delay. I’m trying to find the time to setup a reproduction.

At the same time I do think you should be able to go to your developers with the information I have given so far. I think using a “!important” rule that overrides virtually all other CSS is bad practice and likely to break sites (like mine).

Plugin Support Amin – WPMU DEV Support
(@wpmudev-support2)

9 months, 1 week ago

Hello @mclarkos

I have informed our smush developer about this problem, I’m not sure if we can improve this on our end, but I hope it is fixed in next updates.

Best Regards
Amin
Thread Starter Michael
(@mclarkos)

9 months, 1 week ago
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.
Plugin Support Amin – WPMU DEV Support
(@wpmudev-support2)

9 months, 1 week ago

Hello @mclarkos

Thank you for sharing additional information.

Our Smush development team is working to improve this as we were able to replicate it on our end.

Since I can’t provide any ETAs you may subscribe to our roadmap to get notified about new updates.
https://wpmudev.com/roadmap/

Best Regards
Amin

Thread Starter Michael
(@mclarkos)

9 months, 1 week ago

Great, thank you for following this up. I’ve signed up for roadmap updates and look forward to a fix.

I’m not sure what the process is, but should this support ticket be reopened until a fix is available?

Plugin Support Williams – WPMU DEV Support
(@wpmudevsupport3)

9 months, 1 week ago

hi @mclarkos ,

I hope you’re doing well.

In this case, as the issue will be fixed in a future version of the plugin, and you subscribed to our roadmap, we can close this topic.

You should now be receiving news about our next updates, so you’ll be notified directly from the roadmap.

Best Regards,
Williams Valerio
Thread Starter Michael
(@mclarkos)

7 months ago
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?
Plugin Support Nebu John – WPMU DEV Support
(@wpmudevsupport14)

7 months ago
Hi @mclarkos,

The issue is expected to be resolved in the latest version; however, it may not cover all scenarios. There can still be situations where a layout shift is introduced that was not occurring at the page loading, particularly when the image appears above the fold.

We would like to take a closer look at the issue on your website for a better understanding. Can you please share the URL where you observe the issue so that we can take a closer look?

You can email us the URL at [email protected] using the following template.
```
Subject: ATTN: WPMU DEV support - wp.org

Please send:
– Link to your WordPress site
– Link back to this thread for reference (https://ww.wp.xz.cn/support/topic/smush-v3-20-0-breaks-layout/)
– Any other relevant URLs/info
```
Best Regards,
Nebu John
Thread Starter Michael
(@mclarkos)

6 months, 3 weeks ago

Thanks for the reply. The website affected is currently using a workaround and so doesn’t show the issue. So I’m not sure that would help.

But you should be able to follow comment https://ww.wp.xz.cn/support/topic/smush-v3-20-0-breaks-layout/#post-18573687 for reproduction steps (Amin from your team was able to replicate using this).

Plugin Support Imran – WPMU DEV Support
(@wpmudev-support9)

6 months, 3 weeks ago

Hello @mclarkos,

I hope things are going well for you.

I attempted to replicate the issue by following all the steps mentioned in this response: https://ww.wp.xz.cn/support/topic/smush-v3-20-0-breaks-layout/#post-18573687 on the fresh WP site. However, I am unable to reproduce it.

Would you mind sharing the website URL or contacting us via email so we can collect more information from the site?

–
Kind Regards,
Imran Khan

Plugin Support Nithin – WPMU DEV Support
(@wpmudevsupport11)

6 months, 2 weeks ago

Hi @mclarkos,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open this thread if you need any further assistance.

Kind Regards,

Nithin

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Smush v3.20.0 breaks layout’ is closed to new replies.