Preventing Firefox from recalculating popup size

While developing an extension for firefox and chrome, I noticed that certain UI element of popups (or browserAction) are noticeably janky in Firefox. I modify certain DOM properties in a mousemove event handler to achieve an effect that an element is following the cursor, and it is smooth in Chrome but falls below 10fps in Firefox. It is not something that happens in normal website contexts; only in popup windows.

While I am still unsure of the exact cause, now I am suspecting that Firefox browser’s own code for recalculating popup window size on DOM mutation would have been causing extraneous layout recalculations and this may be the cause of the frame drop, so I am looking for a way to disable this entirely.

The MDN documentation roughly describes the algorithm, but it is still unclear. Would there be any ways to entirely disable layout recalculation, e.g. by specifying certain CSS properties at body or html tags?

1 Like

If your <html> or <body> elements have fixed sizes the recalculation should be fairly fast, especially if you have the overflow hidden. There also shouldn’t be any resizes triggered, since neither the size nor the overflow/scroll changes.

Well, I’d appreciate if you could point out the relevant part of Firefox source code that governs popup window resizes, and use that to substantiate your claim that such operations should be fairly fast.

I have already tried adding width, max-width, height, max-height and adding overflow:hidden; and that do not make any difference. Would there be any other ways to affect the behavior of resizing algorithm?

The reason why i think my issue has something to do with Firefox popup window environment is that, when I replicate the same page with mocked WebExtension APIs, and open it as a normal browser tab, the page maintains 60fps consistently.