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)
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.
@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
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
andscale
.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/