Visit the landing page on a low power device. Carson also noticed low perf of the landing page on a macbook running firefox which I bet is related.
🤔 Expected Behavior
Beautiful 60fps rendering across platforms.
😯 Current Behavior
Runs at a low framerate on Android and makes the whole experience choppy (scrolling etc)
💁 Possible Solution
Tested locally that only animating the transform was performant on Android. Did not test that addresses the Firefox case. Likely need stylistic tweaks to the animation if only animating transform so didn't make a PR.
rajsite
commented
1 year ago
🐛 Bug Report
The current nimble.ni.dev landing page animation runs very slow on mobile devices (Android pixel 3a).
Found that it is due to animating the
stroke-dasharrayproperty: https://github.com/ni/nimble/blob/6d1ae5605adda84ad46fd47c1dbeb500f6ca9a6e/packages/site/landing/styles.scss#L43In order to have the best performance across a wide set of devices we should only animate the
transformandopacityproperties, see web.dev's article Why are some animations slow?💻 Repro or Code Sample
Visit the landing page on a low power device. Carson also noticed low perf of the landing page on a macbook running firefox which I bet is related.
🤔 Expected Behavior
Beautiful 60fps rendering across platforms.
😯 Current Behavior
Runs at a low framerate on Android and makes the whole experience choppy (scrolling etc)
💁 Possible Solution
Tested locally that only animating the
transformwas performant on Android. Did not test that addresses the Firefox case. Likely need stylistic tweaks to the animation if only animatingtransformso didn't make a PR.🔦 Context
Checking out the awesome site on my phone.
🌍 Your Environment
Android Pixel 3a Chrome 108