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

Question

我正在尝试使用元素object-fit: cover上的css属性img来使我的图像填充其包含div并使transform: 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,另外两个也受到影响(当悬停第二个时,第三个也受到影响),
• 当悬停a时div,首先完全显示内部图像(我们可以看到整个图像被拉伸以适合其内部div),然后才能正确缩小并"覆盖" div.

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

关于第一个问题(受影响的兄弟姐妹),我发现其他答案说要使用,translateZ(0)但是当我添加它时,object-fit: cover它不再起作用(整个图像被拉伸以适应内部div).

有关如何在Chrome中使用此功能的任何想法？(无论是object-fit与transform没有其他使用时按照预期正常运作.)

Answer 1

测试后，它似乎backface-visibility，translateZ和translate3d这些都要求防止变换闪烁，休息object-fit和background-size。如果您的目标是使图像居中，则可以使用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/