nw.js: [BUG] CSS3 transitions & animations laggy on Mac retina

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>

About this issue

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

Most upvoted comments

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.

NeXTs on Oct 13, 2017

@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

felicienfrancois on Feb 1, 2015

width, height, top, left etc are generally slow to animate as they cause layouting and repaints. You should, if at all possible, use transform with translate and scale.

Resources: http://csstriggers.com/ http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ http://jankfree.org/ http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

klaemo on Jan 31, 2015