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
I see jank on that example with both Firefox and Edge on a 2020 iMac running macOS Monterey.
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).
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