Jank in animation involving transition:transform and translate,scale
Reported by
t...@tobireif.com,
Jun 27 2018
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Steps to reproduce the problem: 1. Open https://tobireif.com/non_site_stuff/unfinished_demo_rating_interface/rating_interface.html . 2. Click the emoticon, wait for the animation to finish. Repeat eg 1-10 times. Witness the intermittent jank. What is the expected behavior? No jank whatsoever. What went wrong? Sometimes there's a bit of jank / a hiccup in the animation. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 67.0.3396.99 Channel: stable OS Version: OS X 10.13.5 Flash Version: will-change does not help.
,
Jun 27 2018
,
Jun 27 2018
Confirmed seeing a jank on OS X but very rarely.
,
Jun 28 2018
Also observed in Windows. Since the glitch is very rare, I'm attaching a simplified test.html with the object moving continuously by itself. Older Chrome versions are worse but still better than Firefox which is tearing/glitching the object constantly.
,
Jun 28 2018
Nice catch regarding the duration, thanks! From your version test.html: smile.style.transitionDuration = Math.round(innerWidth / 10 / 60) + 's'; By the way, when I wrote "There's no jank in Firefox and Safari" that referred to MacOS. It's unfortunate that Firefox (as you wrote) has major issues on Windows 🙁 Reported at https://bugzilla.mozilla.org/show_bug.cgi?id=1471840 . The hiccups in Chrome on MacOS don't appear very frequently, but the fact that they do happen approximately once in every other run means I can't implement the demo using CSS Transitions until browsers support that completely reliably. In the meantime I'll consider PixiJS - it's extremely smooth, see eg https://tobireif.com/demos/swirls/ . Two additional observations: 1) The rating_interface.html animation sometimes is very janky/unsmooth/stuttering due to factors unknown to me. (not due to editing/modifications) (perhaps after reload, new tab, or running it in an additional tab or profile) 2) When I remove scale(), leaving only translateX(), there still is jank. I hope that you can make this test-page run 100% smoothly in Chrome on all platforms (incl. MacOS, Windows, and Android). Thanks for investigating! |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by t...@tobireif.com
, Jun 27 2018