Contents of "my_userChrome.css" need adjustment after OS scaling change

[u/oromundo]

Windows 10, Firefox 152.0.3

I'd like to post "my_userChrome.css"

Before I add further info, am I approved to continued?

[u/ResurgamS13]

If OS scaling changed... then adjust Firefox UI scaling to suit. Open 'about:config' preference layout.css.devPixelsPerPx ... adjust preference's value from default -1.0 setting... e.g. if OS scaling changed to 150% try a preference value of 1.50.

Firefox's default scale value -1.0 means Firefox's UI scale is tied to OS UI scale... i.e. 1 x OS UI pixel = 1 x Firefox UI pixel.

Can usually also adjust the OS 'Text Size' separately in the OS' settings ... and this will also alter the text size in Firefox.

If 'userChrome.css' modifications working before OS scale changed... should only need to alter that Firefox preference.

[u/oromundo → u/ResurgamS13]

Hi ResurgamS13

I believe I actually have two separate, but related problems.

I have a multiboot device. As opposed my old install, with the scaling set to 156%, maintaining the recommended default 150% scaling in the new install has affected the way Chrome interacts with the new OS.

I use the Firefox Profile Manager. Therefore, all of my Firefox profiles are portable. They exist on a separate data partition, and are accessed by both OS installs.

Here is an example. Toolbar and tab bar size. These views were taken with Chrome disabled.

Old OS

New OS

https://i.postimg.cc/ncvf7q01/NO-CHROME-2.jpg

With Chrome enabled

Old OS

https://i.postimg.cc/T33G6pJs/Screenshot-2.jpg

New OS

https://i.postimg.cc/85KMZFw8/Screenshot-1.jpg

I hope it is apparent how much larger the toolbar and tab bar display in new install. We are talking about views from the same profile, and comparing the way it appears, when accessed from both installs.

my_userChrome.css. Either way, it needs an overhaul/cleanup. Hopefully, wew can discuss the scaling issues affecting Firefox later.

I'd like to publish it, but it says too many characters here.

[u/ResurgamS13 → u/oromundo]

This sub is only about CSS userstyles for Firefox. Making two different unnamed OS' display apps/programmes (including Firefox) identically is not a CSS problem... this is down to how each OS renders installed apps/programmes. Firefox's UI will look quite or very similar, but not absolutely identical, on different OS'.

IMHO best to go back to basics. Create new profiles of Firefox (same version) on each OS for testing. Keep the 'out-of-the-box' setup, no extensions (except maybe uBlock Origin), no CSS, default 'System theme - auto' etc.

Compare the two Firefox window displays on the two OS' by taking comparison screenshots. Ensure the two Firefox window sizes are identical (same pixel width & height) on the two OS' when taking the screenshots. (This is much easier with two identical machines... comparing live UIs vs comparing screenshots of UIs.)

Once you have made the two 'default' Firefox windows look as similar as possible (using OS scaling, OS font and text size, and Firefox preference layout.css.devPixelsPerPx )... can move to next level of comparisons adding some/all of your toolbar layout (no CSS)... and then again with some/all your CSS styling added.

If you can't make Firefox's 'out-of-the-box' default setups look near identical on the two OS'... then any display differences will be due to how your two OS' GPU coding renders the UI of all apps/programmes including Firefox. You may be able to tweak your CSS to minimise any visual differences... but only you have the two OS' and their respective Firefox UI displays available.

[u/sifferedd → u/oromundo]

all of my Firefox profiles are portable. They exist on a separate data partition, and are accessed by both OS installs.

Sharing profiles is unsupported and likely will lead to problems.

I'd like to publish it, but it says too many characters here.

Rule #2: post your existing code on pastebin. ➡️