CSS：在webkit上一起使用object-fit和transform时出现的问题

我正在尝试使用css属性object-fit：覆盖img元素以使我的图像填充其包含的div并变换：scale(xx)以使图像在悬停时缩小.

这是一个示例小提琴：https://jsfiddle.net/96kbuncq/
编辑：带有真实图像的样本：https://jsfiddle.net/96kbuncq/3/

HTML：

<div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" />
   </div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" />
   </div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
   </div>
</div>

CSS：

.....

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

/* Transformations */

div.category img {
  transition: transform 0.35s;
  transform: /*translateZ(0)*/ scale(1.12);
}

div.category:hover img {
  transform: /*translateZ(0)*/ scale(1);
}

这在Firefox中运行良好,但在Chrome和Opera中我遇到以下问题：

>当悬停第一个div时,另外两个也会受到影响(当悬停第二个时,第三个也会受到影响),
>当悬停div时,首先完全显示内部图像(我们可以看到整个图像被拉伸以适合div内部),然后才能正确缩小并“覆盖”div.

我不知道如何解决这些问题.

关于第一个问题(受影响的兄弟姐妹),我发现其他答案说要使用translateZ(0)但是当我添加这个对象适合：封面不再工作(整个图像被拉伸以适合div内).

有关如何在Chrome中使用此功能的任何想法？ (对象拟合和变换在没有其他的情况下使用时都按预期工作.)

解决方法

在测试之后,似乎背面可见性,translateZ和translate3d是防止变换闪烁所需的,破坏了对象适合和背景大小.如果您的目标是使图像居中,那么您可以使用position：absolute和translate,如下例所示.

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/