First example - Image Slider is very janky for me. Firefox, beefy GPU PC, Ubuntu.
The purpose of this site is awesome! I appreciate the transparency of pointing out issues like "no user control over images".
The purpose of this site is awesome! I appreciate the transparency of pointing out issues like "no user control over images".
Here's a similar codepen I made two years ago: https://codepen.io/spartanatreyu/pen/OJVVQRw
It doesn't use floats, so it ends up being silky smooth.
It could be simplified with today's scss/css, but it's still a decent demonstration of how smooth animations should be.
Your demo is doing the same thing as the original – transitioning a `translateX` value. Indeed, I get a smooth, consistent 60fps from both, and a performance profile reveals that no paints occurred in the original! That's AKA "there is no way to improve this"
So, I'm pretty sure float won't have any impact to performance, as the elements themselves don't reflow during the transition.
[0] https://web.archive.org/web/20131109172325/https://www.html5...
I can see the jank on my machine, and commenting out the float statements makes the jank disappear.
Even though the elements aren't reflowing, there is something going on in the browser that is making it slow down.
Strangely enough, recording the browser performance seems to "fix" the jank so long as the browser is recording. Perhaps capturing screenshots of the page every frame is forcing the browser to deliver frame updates at the correct time.
Transform values (and opacity values, like your Codepen use) operate at the compositor level, and don't need to paint.
That means that an element using those values with a float layout won't impact FPS – the transition is unaware that the element is floated.
> recording the browser performance seems to "fix" the jank
If Chrome is also exhibiting it, it has a passive FPS meter to record this. DevTools, Ctrl/Cmd-Shift-P, "FPS". I get a pretty steady 60FPS: https://imgur.com/a/lgntlpw
As soon as I take out the float and rerun the examples they run butter smooth.
Turning on the fps overlay on Edge (it's the same one as chrome) shows stutters (but for some reason I need to make sure I'm moving the mouse smoothly for the fps counter to update, guessing it has something to do with the preview sitting inside an iframe).
Disabling that setting doesn't seem to have had any negative impacts on website performance...this slider is butter smooth, WebGL works fine, and 4K Youtube videos are smooth.
Regarding user control, I suspect you could get at least "pause" functionality to work using the checkbox trick to disable animation if the box is checked.
I'm using Firefox on Wayland with an iGPU and the slider works smoothly on my end.
Chrome's task manager says the page is using ~0% CPU, 20mb of GPU memory, and 90mb of ram.
It likely isn't using much more power than if running at entirely idle, often enough less than the extra a CPU might use doing the same job at a lower frame rate, displaying and updating your current desktop.