really scratching my head about a set of hover-based CSS transitions (mainly transforms, opacity) that animate like butter in Chrome but are so remarkably jank in Firefox.
Not i-should-prerender-these-box-shadows jank.. but 4-5x slower.
any pointers/articles for debugging?
Conversation
Replying to
Any other effects on the page, like SVG?
Are you on Windows, which mostly has WebRender enabled these days, or macOS (which has WebRender coming soon).
Could you record a profile with profiler.firefox.com and share the upload URL?
2
2
This Tweet is unavailable. Learn more
but i have literally removed every part of it and just had some text that did a transform scale on hover and it would still be super jank. really confused now. no other page has this issue and uses same css/js
1
Replying to
Cases I have seen that have been slow had SVG filters. Sounds like you might have a test case that you could share?
if you try the WebRender pref and/or recording a performance profile with profiler.firefox.com I can pull in Firefox graphics engineers for help.
1
Replying to
thanks i can take a look tonight. enabling webrender did not appear to change things (unless i have to restart the app once enabling?). spent a while optimizing things, reducing the number of things that change at once, using some will-change. still very janky but much improved.
3
1
You will to need to restart after enabling WebRender for it to take effect.