My question is simple, why do elements with the CSS "position: fixed" applied to them cause Firefox to eat 100% CPU when scrolling the page they are in? And are there any workarounds?
I've noticed this behaviour on a few sites, for example the notification bar at the top of the page on stackoverflow. I'm using Linux in case that matters.
Do you have an example page up? I'd be happy to try it out in Windows and OS X.
Are you sure that there's a direct link here? Have you created a static HTML page with fixed elements to verify your theory? Given how widely these CSS properties are used, I'd think someone else would have noticed it by now, whatever browser/OS you're running.
It's a bug reported in bugzilla
Apparently a work-around (with mixed reports of success..) is to disable smooth-scrolling
Just disable smooth scrolling in Edit > Preferences > Advanced.
it eats CPU because the browser has to repaint the entire viewport every scroll change rather than just the newly visible area
As already stated, this is bug #201307. The workaround is to disable smooth scrolling:
Edit -> Prefrences -> Advanced -> General tab -> uncheck "Use smooth scrolling"