CSS infinite animation after hidden is not reset (Chrome)

Question

Here I have an example of CSS keyframe animation (You can see the whole thing on this Demo)

The code will every 1.4 seconds scale the img to 0.75 and go back to it's original (1) scale. That works fine.

Then I add a simple jQuery code to simulate the error:

setTimeout(function () {
    $("img").css('visibility', 'hidden');
    activate();
}, 3000);

function activate() {
    setTimeout(function () {
        $("img").css('visibility', 'visible');
    }, 3000);
}

@-webkit-keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
@keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
img {
    -webkit-animation: imagebulger 1.4s infinite alternate;
    -moz-animation: imagebulger 1.4s infinite alternate;
    -o-animation: imagebulger 1.4s infinite alternate;
    animation: imagebulger 1.4s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/200x200" />

This will hide the img element after 3 seconds and during 3 seconds. When the img element is back to to visible, the resizing effect will not be running anymore.

It happens to me in Chrome 41.0.2272 (Ubuntu). In Firefox it works as expected.

---

EDIT

Looks like is bug in with Chrome. I opened an issue. As a workaround, like suggested, either use display:none instead of vissibility:hidden or add a class after setting vissibility:visible

EDIT 2 There is an issue opened here: https://code.google.com/p/chromium/issues/detail?id=444852

Answer 1

It appears to be a bug. The W3 documentation suggests that visibility hidden have the following effect:

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

Hence it should still be being calculated, just not drawn. Obviously the browser will probably want to make savings and not calculate it where possible, which seems to be where the bug is arising when this calculation doesn't recommence when it should. You can get around it by toggling the display and wrapping your animating element in a div of the same size as the element in order to prevent the layout collapsing. Otherwise you could just reapply the animation CSS by toggling the class as Jeff states.

Please see the JS fiddle showing a hidden element still clearly being animated: JSFiddle. This leads me to think it's a bug. Otherwise the below is an example of it working toggling display.

setTimeout(function () {
    $("img").hide();
    activate();
}, 3000);

function activate() {
    setTimeout(function () {
        $("img").show();
    }, 3000);
}

.image-wrap {
    height: 200px;
    width: 200px;
}

@-webkit-keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
@keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
img {
    -webkit-animation: imagebulger 1.4s infinite alternate;
    -moz-animation: imagebulger 1.4s infinite alternate;
    -o-animation: imagebulger 1.4s infinite alternate;
    animation: imagebulger 1.4s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image-wrap">
    <img src="http://placehold.it/200x200" />
</div>

Answer 2

I've run into issues with animations stopping their execution before. The solution for me has always been to reapply the animation as a class whenever I want it to restart. I modified your fiddle with this solution:

http://jsfiddle.net/q234Lsx8/5/

I made the CSS rule apply to img.bulge, and then the jQuery code removes and adds the class bulge on hide and show.