Firefox CSS3 object-fit:覆盖过渡期间的奇怪行为
Firefox CSS3 object-fit: cover strange behaviour during transition
我在 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" 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
大小的问题吗?
我知道这是一个老问题,但今天我找到了解决此问题的方法。到目前为止,我已经在 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>
将 translate3d(0,0,0)
应用到元素 内部 过渡元素不会阻止 GPU 加速过渡本身吗?
这是你想要加速的过渡元素,对吧?但是您正在将调用 GPU 加速的 translate3d hack 应用于没有过渡的元素。
我在 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" 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
大小的问题吗?
我知道这是一个老问题,但今天我找到了解决此问题的方法。到目前为止,我已经在 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>
将 translate3d(0,0,0)
应用到元素 内部 过渡元素不会阻止 GPU 加速过渡本身吗?
这是你想要加速的过渡元素,对吧?但是您正在将调用 GPU 加速的 translate3d hack 应用于没有过渡的元素。