Chris7777 Posted April 16, 2022 Share Posted April 16, 2022 I have a bit of a stutter problem. I would say its subtle but its noticeable. See video (from 2s to 5s is probably most apparent). Obviously hard to capture on video esp. with YouTubes compression, but I think the horizontal stutter is clear Testing devices: It appears only on Mac devices from my testing so far. I have tested two Macbooks: - a 2021 Macbook Pro M1 32GB and a 2016 Macbook Pro Intel 16GB. It occurs on all browsers including Chrome, FF and Safari. PC seems fine. Tested on both an external monitor and laptop retina. Someone suggested a vsync issue, but I see no obvious issues on https://www.vsynctester.com/ (warning that link is intense for anyone with sensitivity to color change/movement) Profiling Profile performance doesn't show anything too obvious, GPU is mostly idle. https://drive.google.com/file/d/1JGSr6V88uxXO2a2HhVAMtPE4TCqrGRQ_/view?usp=sharing Alternatives: I have tried forcing the element on to its own composite layer and other various tricks available like "transform: translateZ(0)", "will-change: transform;", etc Other frameworks: Out of interest, I have also tested a few other frameworks: - Phaser3 + physics movement (canvas): Does show similar stutter - Phaser3 + non-physics movement (canvas): Does not show stutter - Pixi (canvas): Does not show stutter - Godot web export (canvas): Shows stutter unless I enable a fixed target FPS of 60fps Obviously hard to really compare because they are canvas. However I found it interesting that Phaser sometimes showed it, making me think its some kind of delta step issue? Am I misusing the delta in my example above? Summary: Apologies about the wall of text, I just wanted to show I have tried exploring as many options as possible and have exhausted my ideas. I think there is a fair chance this isn't a specific GSAP issue, but I have been knocking my head trying to narrow it down the root cause and hoping someone here may know, being you are much closer to the performance side of browser behavior. See the Pen oNpQgeR?editors=0110 by chrisk7777 (@chrisk7777) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 16, 2022 Share Posted April 16, 2022 I'm having a tough time seeing it, but I'm not really sure what to tell you. You're welcome to look at the source code. Perhaps there are small variations in the browser syncing data with the display or something like that. 🤷♂️ Link to comment Share on other sites More sharing options...
Chris7777 Posted April 16, 2022 Author Share Posted April 16, 2022 Thanks Jack. I figured it would be a tricky one but thought it wouldn't hurt to throw it out there just in case someone else had hit something similar in the past. Cheers Link to comment Share on other sites More sharing options...
Chris7777 Posted May 22, 2022 Author Share Posted May 22, 2022 I just wanted to loop back with a little more info in case someone hits something similar. On the latest MacOS + Safari Tech Preview the jank is less noticeable. Chrome, Safari and FF it's still apparent. Some reading suggests it's related to MacOS' implementation of Promotion (adaptive refresh rate). I've tried setting the monitor to a fixed 60hz with not much luck. But some comments are suggesting that the browsers need to apply a fix, as its a software issue potentially related to browsers not using Promotion correctly. Threejs has an issue that is almost the same as mine as far as description: https://github.com/mrdoob/three.js/issues/21088 That user has the same occasional, but regular jump. There is a related Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1164435 (linked from the threejs issue) I do feel its some combination of OS + refresh rate, and hopefully it naturally resolves itself in a couple of versions of the browser 🤷♂️ 1 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