Image scale issue on browser zoom levels (sometimes)

[ChristianOellers]

PHP Version

8.2.15

Shopware Version

6.5.8.9

Plugin Version

2.2.0

Actual behaviour

If the browser zoom level is below 100%, e.g. 80%, images might be smaller than expected after page load.

Discoveries

• Changing zoom level can fix or break the image display.
• Opening or selecting the image via Browser console can reset/ fix the image display.
• Loading the page at 100% zoom and then zooming e.g. to 80%, does not break the image; however starting in < 100% and changing the zoom, does.
• The issue does not always appear, e.g. if being too fast with zoom or viewport scale changes.
• A smaller image instead the suited one seems to be chosen.

Expected behaviour

The image size suited for the viewport and given CSS styles/ attributes is chosen.

In the given demo case (see image attached), the image should fill the box according to its proportions.

Steps to Reproduce?

Steps

1. Install and activate plugin
2. Set up a product with images, to be displayed in the gallery
3. Zoom out in browser (e.g. to 80%)
4. Navigate to the product detail page
5. Load/ Reload page until issue appears

• Try with and without open console (disabled cache)

Image snippet

cms-element-image-gallery:

<img src="..." data-src="..." data-srcset="... 301w, ... 300w, ... 200w" data-sizes="auto"
    data-aspectratio="0.368" data-parent-fit="contain"
    class="frosh-proc img-fluid gallery-slider-image magnifier-image js-magnifier-image lazyautosizes lazyloaded"
    alt="" title="" data-full-image="..." data-object-fit="contain" itemprop="image" content="..." fetchpriority="high"
    style="aspect-ratio: 0.368 / 1; cursor: default;" sizes="158px" srcset="... 301w, ... 300w, ... 200w">

Specs

• Theme
  • Shopware Default
• Plugins
  • FroshLazySizes
  • Others used are non-interfering (backend)
• Browsers
  • Reproducible: Google Chrome 124.0, Firefox 126.0
  • Not reproducible: Safari 17.4
• System
  • MacOS 14.14

---

[tinect]

thank for contacting us.
does the sizes attribute reflect the shown size?

If so, please open a issue at the used library: https://github.com/aFarkas/lazysizes

[ChristianOellers]

Yes, it seems the attribute sizes does not change the value. Tested at 100% and 90% zoom, and it kept the 100% zoom value. When I trigger a manual change in the attribute, the visible size is adjusted/corrected as well (just with the wrong image being selected for the screen).

I've opened a library ticket: aFarkas/lazysizes#997