Question

我在img内div有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" alt="time">
</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的大小吗？

Answer 1

我知道这是一个老问题，但今天我找到了解决这个问题的方法。到目前为止，我已经在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>

Answer 2

不会将translate3d(0,0,0)应用于里面的元素过渡元素会阻止GPU加速过渡本身吗？

这是你要加速的过渡元素，对吧？但是你正在应用translate3d hack来调用GPU加速到没有转换的元素。

Firefox CSS3对象适应：在转换期间覆盖奇怪的行为

2 个答案: