CSS: Problems when using object-fit and transform together on webkit

Question

I\'m trying to use both the css property object-fit: cover on an img element to have my image filling its containing div and tra

Answer 1

You can create an extra layer, with class wrap, and use this to make the zoom effect

Your styles are the same, but reasigned

html, body {
    width: 100%;
    height: 100%
}

div.category {
    width: 80%;
    height: 150px;
    background-color: yellow;
    margin: 20px;
    overflow: hidden;
    position: relative;
}

.wrap {
    position: absolute;
    height: 100%;
    width: 100%;
}

div.category .wrap img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Transformations */

div.category .wrap {
    transition: transform 0.35s;
    transform:  scale(1.12);
}

div.category:hover .wrap {
    transform:  scale(1);
}

<div>
    <div class="category">
        <div class="wrap">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
        </div>
    </div>
    <div class="category">
        <div class="wrap">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
        </div>
    </div>
    <div class="category">
        <div class="wrap">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
        </div>
    </div>
</div>

Answer 2

After testing it seems that backface-visibility, translateZ, and translate3d which are required to prevent the transform flicker, break object-fit and background-size. If your goal is to center the image then you can use position: absolute and translate like in the example below.

div.category {
    width: 80%;
    height: 150px;
    margin: 20px;
    position: relative;
    overflow: hidden;
}
img {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.12); /* order is important here*/
    backface-visibility: hidden;
    transition: transform 0.35s;
}
div.category:hover img {
    transform: translate(-50%, -50%) scale(1);
}

<div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
    </div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
    </div>
    <div class="category">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
    </div>
</div>

http://jsfiddle.net/moogs/r1s1rtLk/4/