[Bug] If an image is scalable or not is not determined correctly

[aona42]

I confirm:

• [X] I am running the extended version of Hugo version 0.91.0 or above to build my site.
• [X] I have read the Hugo Clarity theme documentation.
• [X] I have used the example site's config files as reference.
• [X] I have reviewed other issues in this repository and mine is not recorded.

Hugo version

v0.120.3-a4892a07b41b7b3f1f143140ee4ec0a9a5cf3970+extended

Where is this bug showing up?

In the browser: Hugo builds the site, but something doesn't look right.

Operating system

Debian Bookworm

Browser (if applicable)

Firefox 115.4.0esr

Current behavior

When I add an image larger then the post-width to a post it should automatically be scalable means one can click on it and it scales to full screen size. This works fine if the image is initially visible when the page is opened because then the image is loaded directly. However, other images "much further down in the post" are not clickable for me. It seems that the JavaScript function in index.js which determines if an image is scalable or not only does this initially when the page is opened. Since the lazily loaded images are not yet available then, their naturalWidth is 0 and all these images are not scalable then.

Expected behavior

Lazily loaded large images should also be scalable.

Steps to reproduce

• create a post
• add a large image which is lazily loaded "further down in the post"
• open the post in the browser and scroll down to the image, it is not clickable

Note: Make sure that the image is not cached. Best is to disable the browser cache in the developer tools.

Relevant log output

No response

Related code

assets/js/index.js

Preferred solution

No response

Other information

No response

[aona42]

"Workaround" can be to add the CSS class image-scalable manually to these images to make them always scalable, but of course this is not optimal.