[Looking for help] Issues with inconsistent rendering fonts and images in character sheets in Firefox

I've been tinkering with custom sheets on roll20 for more than a year now and decided it's time to step up my game and upload one of the sheets, with game author's blessing, to github repository... but I can't do it in good faith before I resolve this problem, or at least confirm there's nothing I can do about it. Few months ago - I missed the exact moment - my Firefox changed the way it renders fonts, breaking the layout of my sheet and forcing slight redesign - but it keeps incosistently rendering even tidiest html and css. I would simply ignore FF's issues, but it is one of two browsers officially supported by Roll20, so I can't really consider my sheet working when it looks wrong in one of them, can I? But then I took a look at official Roll20 sheets and fonts are more or less broken in all of them... and I kind of expected somebody noticing it too when I first did, two months ago. And I can't see any mention of that on this forum, so I assume it is something on my PC. Because there's nothing wrong with it, it's just a way FF renders it, I assume I can chalk it under me still using Win7 being the reason. Please look at those two screenshots of MythicD6 character sheet - I use well established character sheet as example, so we're clear it's not any bug, it's just the way roll20 looks in my Firefox. Screen one,FF 92.0.1, no addons. Screen two, Chrome (MS Edge, Vivaldi, Opera are rendered pixel-by-pixel identically - all browsers updated to newest version and no addons) Take note of label "PLAYER NAME" - it's in the container with set width, and doesn't fit in one line anymore in FF, breaking the layout in a fashion identical to the problem I had with my sheet few weeks earlier. Inspecting the computed values in both browsers reveals both having all numerical values in style and entire CSS code 100% identical. I spent close to ten hours trying to find a difference. Any difference. In various sheets, various browsers, various examples. I didn't find any. Same font, same style, same weight is simply bigger - and uglier - in FF. It's the size that breaks the layout, obviously, but non-anti-aliased rendering makes any rescaled images look similar to that font: blocky, ugly, pixelated. I understand, if Win7 is to blame, then it's on me - and I can use the "Win7 is not supported" excuse myself when somebody complains about my future sheets being inconsistent in this particular way - but please help me find an answer to why two identical sets of HTML+CSS, computed with identical results, produce different result under different browsers - what's exactly responsible for the discrepancy.Maybe somebody knows how could I make my FF behave? I spent several days trying to find a setting of FF engine that would be responsible for this discrepancy, to no avail. Does somebody have any idea how can I do something about it? I assume other Firefox users do not have this problem, because it would be reported long time ago. Is anybody here using FF on Win7 and noted anything similar?

It's not just you, firefox visuals changed for everyone. Suspect it's that one update where they changed how the browser itself looked, and they ended up implementing changes for website rendering. For the dropdown, don't think there is anything to be done. How it looks for me on Firefox(Linux). My dropdown is dark bc the browser seems to detect my preference for dark-mode. Fixing this minor visual thing is low on my priority-list, as it doesn't cause usability-issues. I have currently under works an update to the GODSEND Agenda sheet, by the same publisher. But could take a look at the sheet on windows at some point and see if I find time to get Firefox/Windows adjustments. Will ask around from other sheet authors if they have encountered the same thing, and if they have figured out fixes for Firefox. Keeping looks consistent cross-browser is an annoying part of web-development, and something I've at times spent considerable time researching, but there are always new developments on this front. I have a faint memory  of taking a look at this( or something similar) some month ago, but ultimately concluded that select can't be styled in FF as much as it can in Chrome. Another annoying thing with Firefox/Chrome is how datalists(use for autocompleting Power names on the MythicD6 sheet) are handles differently on the two browsers, and there is nothing we can do about it.

Ah, that's... a mixed bag of feelings, here. I am really surprised that it's common problem after all, I really expected some more outcry - but I guess I am young and naive in my hopes of maintaining cross-browser consistency. If it can't be maintained, there's no reason to waste energy on going above and beyond of certain threshold to try. But I am also disappointed there's nothing that can be done to make it look good - and kind of relieved there's nothing more I need to do about it, if there's nothing I can do :) Thanks for the information. If it's a common problem, if it's just FF feature practically speaking, then I simply need to account for it - and either leave few px of room extra, or try to use some form of conditional formatting. I can't make them look good, but I can keep them from breaking the layout. Also, I need to save the images in final size - or sizes - instead of relying on scaling down HQ graphics. And play the games myself in some other browser so I don't need to look at it :)

While you can't do much about the <select> styling, you can fix most of the rest of it - there's something in the way you've styled the font that isn't consistent between the browsers leading to the slight differences in appearance and the "player/name" and "power/level" line break issue. You can fix that specifically with a white-space: nowrap , but you're probably better off finding why the font is displaying differently in the first place and fixing that as well. It might be an issue with how the font is specified, or it could just be a bad FF rendering which will need a browser-specific fix - either way, if it's a sheet-wide font it's probably worth trying to get it looking right. Also, how are you specifying font size? Pt, px, em, rem? There's also a couple of ways of specifying font weight, which can make cross-browser differences. I think the wiki also has a method for removing the number input spinners in FF (if not, should be easy to Google), which looks like it's the other major difference between the screenshots.

I assure you, the computed values for the fonts are identical, even when it's specified in various units. I tried several ways, ending up with px size and numerical weight specifically to avoid any interpretation - and inspector in FF claims identical size in px, weight, style - but they end up slightly bigger in FF. I know it sounds like an oxymoron, for one of the same-sized texts to be of different size... but that's what it is. I used the nowrap approach in my sheet, not presented on the images - but the text was rendering slightly wider, which caused columns to  be slightly wider and they stopped floating next to each other in the character sheet window of default width. Yeah, I didn't mention spinners, because it is a known "feature". But in that case, the inspection reveals the differences in the interpretation of css. The crux of the font rendering problem is identical interpretation of the CSS and identical results of the computation.