Firefox CSS3 object-fit: cover strange behaviour during transition

问题

I have img inside the div with exact width and height. I would like to place image there like background-size: cover to fill entire div so HTML is:

<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>

And CSS is:

.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;
}

Here is live example http://jsfiddle.net/sytwrd9L/1/ - 2 seconds after load the image disappears. In the Firefox 36 it resizes the img during transition but in other browsers it works well. Any idea how to fix not to resize img during transition in FF?

回答1:

I know this is an old question, but today I found a workaround for this issue. I've tested it in Firefox 44.0 so far.

The Workaround:

<!-- 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>

回答2:

Wouldn't applying translate3d(0,0,0) to an element inside a transitioned element prevent the GPU from accelerating the transition itself?

It's the transitioning element you want to accelerate, right? But you're applying the translate3d hack that invokes GPU acceleration to an element without transitions.

来源：https://stackoverflow.com/questions/28939689/firefox-css3-object-fit-cover-strange-behaviour-during-transition

标签

html

css

css3

firefox

css-transitions