Image scale issue on browser zoom levels (sometimes)

[ChristianOellers]

Describe the bug

Desktop

• Zooming the browser (e.g. 80%) can re-render the image in a smaller size than it should. *
• Scaling the viewport width; loading in one and changing back can change the size to an inappropriate choice.
• Opening the browser console might trigger this as well (due to height change?).

---

Originally issued here: https://github.com/FriendsOfShopware/FroshLazySizes/issues/28 Maybe related? https://github.com/aFarkas/lazysizes/issues/906

---

To Reproduce

• https://codepen.io/TheRemoteCoder/pen/PovNQPG

Steps to reproduce the behavior:

• Scale viewport smaller/ larger (image size changes)
• Zoom out in browser (e.g. to 80%); zoom in again
  • This seems to not affect CodePen
• Load/ Reload page until issue appears in each view state

This behaviour seems to be different, depending on how fast the zoom/ viewport change happens; and sometimes it won't appear. Try at least 5-10x.

What is the expected behavior:

• Image size adjusts to container/ screen space, as defined by HTML and CSS constraints.
• Zooming the browser should trigger a reconsidering of available image size.

What happened instead:

• Image stays too small for the available size.

In what environment (browser/device etc.) does this bug happen/not happen:

• Browsers
  • Reproducible: Google Chrome 124.0, Firefox 126.0
  • Not reproducible: Safari 17.4
• System
  • MacOS 14.14

Keywords help others to find this issue:

zoom, scale, scaling, size, browser

[ChristianOellers]

Quick solution - Concept?

I can imagine a solution, where one can trigger a re-rendering/ consideration via API/ event. In this case, the checks to do so are on our own side, and don't need to go in the library.

Is this maybe already possible?