How to fix inappropriate transition behavior in safari?

Question

css

mg901.hol.es/flagman
In Safari on Mac, when you hover over pictures, they increase, everything works adequately, but if you add a transiton, they first shrink on hover (a small indent appears), and then take on the desired size.
There is the same example, but with the super curved layout of flagman.anmedio.ru, there is no such problem here.
Please tell me how to fix this bug.
Here is an example at condepen codepen.io/mgreen097/pen/ZQaOWa?editors=110

Answer 1

Thanks to everyone who participated and tried to solve this issue.)
I decided to deprecate transition: scale(); since the same can be done simply by setting a larger value for the width and height. I also gave the element that contains the image absolute positioning and centering it to grow from the center. here you can see the solution codepen.io/mgreen097/pen/NxwdRR?editors=110

Answer 2

In ff on Windows, it is also noticeable chyuchyut. I think it doesn't hurt to set will-change: transform for the pictures. Although, sometimes FF can produce all sorts of artifacts with a large number of elements, set some other fictitious filter, such as filter: brightness(1), especially for web kits, it helps like
like " during transformation .. In general, I think it is necessary that it initially overlaps the container frame by a couple of pixels ..