CSS animations in Chrome choppy unless zoomed in

Question

I'm working on a website project which contains multiple elements animated with CSS (and sometimes jQuery). However, for elements containing large visuals, the animation often lags and doesn't look nice. Examples are large images fading in/out or re-sizing a div containing a Google map. Simpler elements containing text or something work fine.

HOWEVER, when I zoom the page to ANYTHING other than 100% (both in and out), the animation looks perfectly smooth. If I then go back to 100%, the animation sometimes looks smooth, and sometimes starts to lag again.

In other browsers (tested in IE and FF) the animations look fine at any zoom level, including 100%.

Is this just a Chrome bug/issue I will have to accept, or is there anything I can do to improve it? Keep in mind it is absolutely necessary that large images are animated.

Edit, code example:

JS:

function pictureOverlay(url)
{
    var body = $('body');
    var overlay = $('<div class="overlay"></div>');
    body.append(overlay);
    overlay.append('<img class="picture-overlay" src="' + url + '"></img>');
    overlay.hide().fadeIn(400);
    overlay.on('click', function() {
        $(this).fadeOut(400, function() {
            $(this).remove();
        });
    });
}

CSS:

.overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 200;
    vertical-align: middle;

    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.75);
}
.picture-overlay {
    position: absolute;
    display: block;
    max-height: 90%;
    max-width: 90%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.75);
}

This displays a picture overlay with a black transparent background that fills the entire screen and fades in/out. The overlay contains a picture that is resized to fit 90% of the width or height of the screen (depending on the aspect ratio).

Can you replicate the behaviour in a demo on Fiddle? I can't say I've seen it before... — kmoe, Oct 02 '14 at 13:17
If you can't replicate it in JS Fiddle, is the website live to view? — Kitson, Oct 02 '14 at 13:28
I can't seem to replicate it in JS Fiddle. Possibly because the result is rendered in an iframe on that site, and not on the whole page. I can't make the website public either currently. I can however paste some example code in my question that reproduces the effect. — Wouter Florijn, Oct 02 '14 at 16:38

score 0 · Answer 1 · edited May 23 '17 at 11:57

This may not fix your specific bug, but an alternative method that may help is to utilize high performance CSS animations that perform the animations on the GPU vs. the CPU. More specifically, animations based in javascript have been found to be less performant since you are bound to JS' single thread of computation and lack of access to the GPU. Fortunately, CSS can help.

I highly recommend you check out this article on high performance browser animations and potentially move your animation code to use CSS instead. You can achieve the same effect that you want by just adding the CSS class that contains the animation to the affected node.

You can also execute some JS logic when the CSS animations are completed by utilizing the "transitionend" event.

CSS animations in Chrome choppy unless zoomed in

1 Answers1