2 ms·
The original is doing `translateX` yes, but it also has float in it. I can see the jank on my machine, and commenting out the float statements makes the jank d
by spartanatreyu 4y ago
The original is doing `translateX` yes, but it also has float in it.
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.
- lelandfe 4y agoHere's a dead simple example, do you experience jank with it? https://jsfiddle.net/6etnpzyx/1/ https://jsfiddle.net/6etnpzyx/1/ 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 https://imgur.com/a/lgntlpw
- spartanatreyu 4y agoI 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).