Share Posted April 6, 2016 I have a very simple setup with two elements tweening right and left. One is using 'x' and 'force3D:true' while the other is simply using 'left'. Both seem to 'stick' as they move across the page, looking almost laggy. I'm running Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0. I even recorded the browser with quicktime and you can see it in the video, too. Is anyone else getting the same result? See the Pen BKWxex by craigster1991 (@craigster1991) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I'm sorry I can't add much but only to say I see it in Chrome 50.0.2661.57 beta (64-bit) and Firefox 45.0.1 also. Safari is perfectly smooth Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 hmm, I can't really say that I see anything strange. The CodePen editor can sometimes be running processes that interfere with performance and iframes are known to be not so good. Do you get the same results in debug mode? http://s.codepen.io/GreenSock/debug/KzyYYM Can you post your video so that we can see what you are seeing? Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 Hi, Like Shaun I'm not seeing anything. Tested IE11, Chrome 49 and Firefox 44 on Windows 7 64b. My guess is that perhaps you have too many extensions running, which could mean memory usage. Also this happens on the first run of the animation or in every repeat? Finally long animations, like this one, can become a bit jumpy some times. Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I'll echo what Shaun, Carl and Rodrigo said. I tried almost everything - 32/64bit, Win7/10, Edge, FF and Chrome. All looked fine to me. Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I did notice a bit of a jolt/jerk in Firefox 45, Chrome 49, and Safari 9 on my Mac. Adding rotation:0.01 seems to help in Chrome and Firefox but not Safari: http://s.codepen.io/ohem/debug/dMZxgK 1 Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I want to clarify ... in my first post, I was apologizing for not adding much to the conversation ... other than to state that I do indeed experience the snagging in Chrome 50.0.2661.57 beta (64-bit) and Firefox 45.0.1. Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I see the problem too. Pretty bad in Chrome. Here's the pen I used. See the Pen e56b60497b629a4fd57c9cb1c65a77b3 by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 That is really strange. From the video, I see what everyone is talking about, but I don't see any of that on the OP's pen or Blake's. I just tested in Chrome 49 Win10 and it's perfectly smooth for me. I refreshed a dozen times and didn't see a single twitch. 1 Link to comment Share on other sites More sharing options...
Share Posted April 6, 2016 I was seeing that same stutter using See the Pen e56b60497b629a4fd57c9cb1c65a77b3 by osublake (@osublake) on CodePen from above, and it was translating all shaky-like on Windows 10 in Firefox 45.0.1 and in Chrome 49.0.2623.110 m. But after adding rotation: 0.01 the stuttering went away ... just my two measly bits. Weird 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 8, 2016 Yes I see the same same stuttering on Blake's Codepen and a recording of mine shows the same result: https://www.youtube.com/watch?v=sHPQMmpWDD0&feature=youtu.be This also occurs is Codepen debug, and locally on my apache server with the exact same code on the same browser. Adding rotation has no effect for me. My machine is a 2012 Mac Mini with a quad core cpu, intel hd 4000 gpu and 10gb of ram. I don't see a reason why it should be happening... Link to comment Share on other sites More sharing options...
Share Posted April 8, 2016 My best guess is that it is related to this issue. http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/ Jonathan said that adding rotation: 0.01 fixed it, so it might be an anti-aliasing bug. Sub-pixel rendering kicks in if a value has a decimal value, which is what happens when you add a slight rotation to an element that was at an integer value. x = 5; // no sub-pixel rendering x = 4.999 // use sub-pixel rendering It uses a completely different algorithm for anti-aliasing, which can cause stuff to become blurry or snap if it's not actually doing the sub-pixel rendering or vise versa. Link to comment Share on other sites More sharing options...
Author Share Posted April 11, 2016 Jonathan said that adding rotation: 0.01 fixed it... This doesn't fix it for me - I tried on both my codepen and the one Blake posted. Weirdly if I run two different tweens with different times (one of the boxes one second longer) they both stick at the same time, not at a given x position. If it is the sub-pixel rendering issue, would that be occurring on every tween at the same time? Like an engine issue? Link to comment Share on other sites More sharing options...
Share Posted April 13, 2016 Rotation didn't change anything for me either, nor did using CSS animations. See the Pen f2e826e130e49b756eaf37b5374865f7?editors=0100 by osublake (@osublake) on CodePen This won't help you fix the problem, but here's a good intro explaining how sub-pixel rendering works. http://www.html5rocks.com/en/tutorials/internals/antialiasing-101/ Link to comment Share on other sites More sharing options...
Author Share Posted April 13, 2016 I'm getting the exact same issue with the CSS animations you've posted - on seemingly every device and browser I test... I've made a rotation based animation in TweenMax and run it on my phone (Xperia Z3 Compact) and it also glitches: https://youtu.be/VHq0EROBaWc Link to comment Share on other sites More sharing options...
Share Posted April 13, 2016 Try testing this outside of codepen to see if you still see this behavior? And inspect the element and make sure it is actually being animated with translate3d() or matrix3d(). If not see if z: 0.01 helps? Best thing to do if only Blake, ohem, and ChrisWheatley are seeing this, is to share what you both have in common. What OS ? What OS version ? What graphics card ? What browser ? What browser version ? Since me and Craig (PointC) don't see this behavior. Try adding autoRound: false .. see if that helps? Otherwise I'm no help since I can't replicate this on Windows 7, Windows 10, or on iOS .. in Chrome 49 (mobile and desktop) or even in latest Firefox, IE11 and MS Edge. Link to comment Share on other sites More sharing options...
Author Share Posted April 13, 2016 I've replicated outside of codepen. I've run it locally on my machine's apache server using TweenMax and css animations. I've then run this local version on my machine in several browsers and my phone too (see my previous post). The elements are being translated in 3D, but the issue remains regardless if they are or not. I've tried force3D:true and z:0.1. autoRound doesn't help either. My current machine is: Late 2012 Mac Mini OS: 10.10.5 GPU: intel hd 4000 Browser: Chrome 49.0.2623.112 (64-bit)I get the same issue on my laptop: Windows 10 Pro GPU: Nvidia GTX 765M Browser: Chrome 49.0.2623.112 m And my phone: Xperia Z3 Compact Android 5.1.1 GPU: Adreno 330 Browser: 49.0.1626.105 Link to comment Share on other sites More sharing options...
Share Posted April 13, 2016 If your seeing this pretty much in Chrome 49 then there already is a bug report already reported for this behavior. You can go here to view the bug report http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2#entry59138 And the GSAP forum topic it was related to http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2#entry59138 If you feel it is different bug, since your not scaling and only translating, then feel free to submit a bug report to the Chrome Dev Team. https://bugs.chromium.org/p/chromium/issues/list?cursor=chromium%3A596382&q=chrome%2049 3 Link to comment Share on other sites More sharing options...
Author Share Posted April 14, 2016 It feels like much the same issue. Mostly occuring on chrome intel/nvidia cards. I'll be keeping an eye on the chrome bug and if this issue remains once it's solved I'll report a new bug. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now