Images in firefox

[mariofonestar]

I am encountering the following problem on my page.

When I use Firefox and try to view an enlarged image, the following happens, as shown in the attached screenshot.

The small square does not capture the part of the image I am selecting at that moment.

This only happens the first time I hover over the image. The second time, the image changes size and displays correctly, as shown in this other screenshot.

Here you have the link to this example: https://fonestar.com/en/sky-6-dome/

[payalord]

This issue occurs due to a combination of using the following styles:

#gallery img {
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

and:

.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
  object-fit: contain;
  aspect-ratio: 1/1;
}

Also compared to chrome Firefox doesn't render on first load 400x400 product image container. That is even possible to see on your screenshots, on the first one you can see that aspect ratio is not 1:1. On second same product's aspect has been changed to 1:1. While on Chrome browser on first load it renders this CSS style properly right away.

My suggestion to fix this issue is to eliminate the styles related to:

object-fit: contain;
aspect-ratio: 1/1;

Or find the proper combination of this styles that will work for both browsers and will not affect xzoom default behavior.