Strange UI behavior in Firefox - WASM build not affected

I am seeing unusual hover effects and element misalignment throughout my self-hosted Invoice Ninja v5.3.1-C58, and the current Invoice Ninja demo site, when using the latest version of Firefox 91.0.2 (64-bit) on Windows 10 and macOS Catalina. I’ve tested this on multiple computers and in private browsing windows with no extensions enabled.

  • The company name in the Dashboard is aligned such that the top of the text is cropped off.
  • Some titles, icons, and UI elements move on the page when hovering the cursor over them.
  • In some cases font-spacing appears to change slightly when the cursor is hovered over text.
  • The dot inside of radio buttons is not centered.
  • The vertical alignment of text inside of tool-tip bubbles jumps between center and bottom aligned.

Interestingly, none of these issues are present in Firefox if I view the WASM build that was mentioned in a tweet by @hillel recently.

Invoice Ninja WASM Demo: Invoice Ninja

Invoice Ninja Current Demo: Invoice Ninja

If anyone is familiar with what’s happening here I’d appreciate some feedback or guidance on how I might resolve this. I’m about to make the switch to Invoice Ninja and would like to have it look it’s best in my primary browser. Thanks!

InvoiceNinja-FireFox-2

= = = = = =

InvoiceNinja-FireFox-1

= = = = = =

InvoiceNinja-Firefox-3

= = = = = =

InvoiceNinja-Firefox-4

Thanks for the screenshots!

In general any performance differences you see between browsers is out of our hands to fix, we use a third party UI framework which abstract this from us.

You can either use the WASM version or use the desktop version which should perform much better. Hopefully over time these issues will be resolved by the framework.