CSS - image scale issue and Chrome FATAL error

Hi,

I’ve made simple section with 3 images in grid. Then I make transform with scale to make it a little bit bigger after hover over it. I set outline as well.

Everything is fine but I can see little ‘sharpness’ fix at the end of the animation. It looks like image try to fit between outline boreder about 2-3px and gets more sharpness as well.

Images are not so big, cause they are (3) between 600-1000px width and 600-700 height. I tried:

resize them to the same size > doesn’t work
overflow: hidden; > doesn’t work
remove outline > doesn’t work


        img{

            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            box-shadow: -1rem 1rem 2rem;
            margin-top: 2rem;
            transition: all .2s;
            overflow: hidden;
            z-index: 10;
            
            &:hover{

                transform: scale(1.2);
                box-shadow: -1.5rem 1.5rem 3rem;
                z-index: 20;
                outline: .4rem solid $ind;
            }
        }

It’s very hard to tell what’s wrong without an actual demo, can you share a codepen?

I almost done but I found out a new issue.

This is how my layout looks like in mozilla

and here I get feedback from Google Chrome:

Grid error in Chrome?

//EDIT

What can I say more: This ‘sharpness’ fix only exists in mozilla, I cannot see it in Google Chrome but in Chrome I can see little gap between an image and an outline.

Any know why my grid layout doesn’t work in Chrome just as in Mozilla? Do I need prefixes?