Firefox CSS3 object-fit：覆盖过渡期间的奇怪行为

Posted 2023-03-06

【中文标题】Firefox CSS3 object-fit：覆盖过渡期间的奇怪行为

【英文标题】：Firefox CSS3 object-fit: cover strange behaviour during transition

【发布时间】：2015-05-10 11:20:22

【问题描述】：

我在div 中有img 与精确的width 和height。我想像background-size: cover 这样将图像放在那里以填充整个div，因此html 是：

<div class="cover">
    <img class=active src="http://pixabay.com/static/uploads/photo/2015/02/26/17/56/clock-650753_640.jpg" >
</div>

而 CSS 是：

.cover 
    width: 400px;
    height: 180px;
    position: relative;


.cover img 
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0;
    transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0s;


.cover img.active 
    visibility: visible;
    opacity: 1;

这里是实时示例http://jsfiddle.net/sytwrd9L/1/ - 加载 2 秒后图像消失。在 Firefox 36 中，它会在转换期间调整 img 的大小，但在其他浏览器中它运行良好。知道如何解决在 FF 转换期间不调整 img 的大小吗？

【问题讨论】：

由于这是一个 4 级规范实验属性，我怀疑是否会有很多解决方法。

【参考方案1】：

将translate3d(0,0,0) 应用到元素内部过渡元素会阻止GPU 加速过渡本身吗？

这是您想要加速的过渡元素，对吗？但是您正在将调用 GPU 加速的 translate3d hack 应用于没有过渡的元素。

【参考方案2】：

我知道这是一个老问题，但今天我找到了解决此问题的方法。到目前为止，我已经在 Firefox 44.0 中对其进行了测试。

解决方法：

<!-- Apply the transition to this element -->
<div class="transition">
    <!-- Apply a 3D translate to this element -->
    <div class="translate3d">
        <!-- Apply object-fit to this img elemnt -->
        <img src="path/to/img.jpg" class="object-fit" />
    </div>
</div>

【讨论】：

太好了，您的解决方案正在运行我刚刚测试过它：jsfiddle.net/sytwrd9L/7

它看起来像 Firefox 中的一个错误，在我的情况下，只需为“top”属性分配一个不同的值，即使没有转换：image.style.top = '10px'。图像将“挤压”片刻。显然，将转换应用于父元素是唯一的解决方法。