Why doesn't the image keep aspect ratio in safari browser?

Question

css

Hello. I'm working on a layout and I've run into this problem. For images that have a transform property, when the screen is reduced, I reduce the width so that the image becomes proportionally smaller. However, in the safari browser, the height of the image remains unchanged, which causes it to stretch.

Stretching was solved easily with the help of the object-fit property. However, since the height remains the same, the layout still floats. Does anyone know how to solve this problem. If anything, here is the layout https://pateder.ru/Development/sineo/

Answer 1

Good afternoon,
How do you set the transform? )
Some properties do work differently in different browsers. If your problem is exactly "transform safari", just write in Google and the first links will give you something like this:

-webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

Also look for special sites that check / add cross-browser compatibility for css