Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] CSS3 transitions & animations laggy on Mac retina

See original GitHub issue

Reproductible on Macbook Retina (end of 2013) with OS X Yosemite and latest nw.js 0.12-alpha2 (but i had the same issue with previous builds)

My tests On the same computer Macbook Retina (end of 2013) with windows 8.1, Ubuntu 64bit and OS X Yosemite in multiboot I tested the following simple snippet and I get the following results:

Windows: perfectly smooth
Ubuntu: perfectly smooth
OS X, nw.js 0.12.0: clearly laggy / stuttering
OS X, nw.js 0.12.0 with --ignore-gpu-blacklist: no changes
OS X, Chrome 41: nearly smooth
OS X, Chrome 41 with --ignore-gpu-blacklist: perfectly smooth

<!DOCTYPE html>
<html>
<style>
    body, html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: #EEEEEE;
    }

    #div {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #ff0000;
        opacity: 1;
        transition: all 400ms ease-in-out;
    }

    #div.on {
        width: 20%;
        height: 20%;
        left: 40%;
        top: 40%;
        background: #0000ff;
        opacity: 0.3;
    }
</style>
<body>
<div id="div"></div>
<script>
    document.body.onclick = function() {
        var div = document.getElementById("div");
        div.setAttribute("class", div.getAttribute("class") === "on" ? "off" : "on");
    };
</script>
</body>
</html>

Issue Analytics

State:
Created 9 years ago
Reactions:1
Comments:23 (1 by maintainers)

Top GitHub Comments

4reactions

NeXTscommented, Oct 13, 2017

I’ve also noticed this behavior at chrome on retina screen. I have external monitor (default LG) connected to my mac. And I have page causing a lot of css transitions/animations. So this page looks smooth on my external screen, but once I move chrome tab to retina screen - performance decreases significantly, all transitions getting choppy 😦

I believe that because of larger resolution, chrome needs to allocate more memory or something like that.

I have to note that Firefox doesn’t behave this way, transitions looks smooth on both screens using FF.

4reactions

felicienfrancoiscommented, Feb 1, 2015

@klaemo Thank you for the tips but that’s not the point.

The point is there is a big gap of performance between Chrome and NW.JS under mac OS X.

The snippet is just an example written to simply reproduce the issue with a noticeable enough lag but the laggy behavior also happen on a variety a situation