Cannot get to bottom of some pages using Firefox

[LizardJM]

First, been using FreeNAS since the early Betas were available and have loved it ever since!

Just built a FreeNAS with a clean install of 11.1 64-bit, then upgraded it to 11.3-U3.2 by changing the Train to 11.3 STABLE.

Built on a white box with a Asus H81M-A 1150 Motherboard + Intel i5-4460 3.20Ghz Quad Core CPU + 16 Gigs of RAM. Seems to be running well.

The issue I'm having is with the GUI when using Firefox (ver. 77.0.1). On my laptop with a (HP Envy i5 with 1600 x 900 display), with Firefox maximized, I cannot scroll to the very bottom of the page if the page does not fit completely in the window (we see this on, for example, the System/General page). On a page with action buttons at the bottom (Save, Cancel, etc), I can only see the very tops of the buttons when fully scrolled down unless I shrink the page (ctrl - ), at which point everything is way too small to read (again, assuming the page will not normally fit without scrollbars). The full buttons only appear if the entire page fits without scrollbars. If Firefox is not maximized, I cannot even get to the buttons at all. Similar issue with Chrome, except that scrolling works and I can get to the bottom if Chrome is around half the height as the point where Firefox can just display the whole button (any smaller, and I can't get to the buttons on Chrome either). On another machine with full HD monitor, I can only see the full buttons if there are no scroll bars in the window (Firefox almost full screen).

Since the legacy UI is no longer available in 11.3, will be reverting to 11.2 to see how that works..

 

[Tigersharke]

I cannot test this myself as I do not have any FreeNAS running here. Rendering of web pages can be a bit peculiar at times. Some sites use CSS that one or other browser inaccurately displays or functions in one and not the other. There can be poor choices of font, or weird overrides which the browser itself causes.

• Have you checked that the default font sizes (as browser setting) are such that the entire FreeNAS GUI (webpage) as a composite of all text, does not cause this failure to fit issue?

If there ends up being no other solution and it is indeed something in the GUI markup (CSS or such) for FreeNAS, or even if not, then as an interim solution I would recommend stylus addon for your firefox, then use it to adjust the CSS which is causing the issues you describe. This would be done by identifying the element on the page, copying its selector, and then creating a stylus style sheet to modify it with local CSS.

 

[LizardJM]

Thanks for the reply - I may look at the stylus addon at some point. My current laptop has a pretty vanilla Firefox install (no plugins to speak of yet), as I just did a clean install of Win 10 not long ago. Scaling with {CTRL - } did make it all visible, but then the text is too small to read. I did revert to 11.2 Train on the new FreeNAS box, and the issue went away (Firefox scrolls correctly and I can get to the buttons even if Firefox is set to be fairly short), so something changed with 11.3. And, of course, now I don't have a 11.3 machine to test... Wouldn't be surprised if it is a CSS issue of some sort...

My current "production" NAS is on a small NAS case with a mATX mobo with a Pentium(R) CPU G860 and only 4 Gigs of RAM, running a 6 TB ZFS pool curently on the 11.1 Train (!). I know about the 8 Gig minimum... System has, even though, been rock solid (probably a bit slow), but I built the new one so I could play with 11.2 or 11.3. Guess I'll wait a bit on 11.3, but so far 11.2 looks good on the new machine. Been using FreeNAS as iSCSI for ESXi VM backups, as well as SFTP remotely (via site to site VPN) for data backkups. Started using it when it first forked off of pfSense (which I have been using since it forked off of M0n0Wall, which I had been using since it was introduced - yup, I'm an old retired IT fart! ;-p ).

Thanks again for the suggestions.

 

[winnielinnie]

I can confirm this problem as well. It works "better" with Google Chrome (Windows or Linux), yet I just noticed the same exact GUI issue that @LizardJM described when I tried it with Firefox.

I notice it's worse the more you have the page "zoomed in". This issue can be somewhat replicated under Google Chrome if you play around with the zoom options.

I think it's a combination of the underlying code, combined with the display resolution, combined with the zoom level of the current browser... but when using Firefox this issue still occurs at the default 100% zoom.

Perhaps this can be fixed by increasing the padding at the bottom, just under the buttons? I'm no web developer, so it's just an uneducated guess.

UPDATE: I changed Firefox's Minimum Font Size to 16, and it seems to be just right for my computer / display. Try playing around with different values, since 16 might not work as well for you. However, this will change the minimum font size for all websites, not just your local FreeNAS server.

Using Firefox > Menu > Preferences > General > Fonts and Colors > Advanced > Minimum Font Size

 

[Tigersharke]

I can confirm this problem as well. It works "better" with Google Chrome (Windows or Linux), yet I just noticed the same exact GUI issue that @LizardJM described when I tried it with Firefox.

I notice it's worse the more you have the page "zoomed in". This issue can be somewhat replicated under Google Chrome if you play around with the zoom options.

I think it's a combination of the underlying code, combined with the display resolution, combined with the zoom level of the current browser... but when using Firefox this issue still occurs at the default 100% zoom.

Perhaps this can be fixed by increasing the padding at the bottom, just under the buttons? I'm no web developer, so it's just an uneducated guess.

UPDATE: I changed Firefox's Minimum Font Size to 16, and it seems to be just right for my computer / display. Try playing around with different values, since 16 might not work as well for you. However, this will change the minimum font size for all websites, not just your local FreeNAS server.

Using Firefox > Menu > Preferences > General > Fonts and Colors > Advanced > Minimum Font Size

If you install the stylus addon, you can create a specific adjustment override for the FreeNAS GUI IP address, or how ever the URL appears for Firefox. This way, you can set the font size perfectly for FreeNAS and not affect anything else.

I believe there is also the option somewhere in the browser to zoom the whole page including the font, or zoom only the font. Firefox and it seems browsers in general, fail with relation to how they handle a universal default which becomes a universal override for colors, font, and font size. Sometimes web pages make very bad choices, but for the most part I would prefer that firefox NOT use any default font or font size-- not sure that this is even possible (maybe it is) but a sane default for most sites is not a guaranteed perfect on all of them. I have a few stylus styles which I use as universal overrides, it isn't perfect either, but I can always make a specific style for any site that is otherwise horrible. Be *sure* to backup your styles, sometimes it can be a real challenge to finally get things looking right-- facebook and twitter especially, or any other site that intentionally obfuscates the CSS.

 

[LizardJM]

winnielinnie
Thanks for the reply. Somewhat glad I'm not the only one! I did look at the Minimum Font Size setting - was set to what I assume is the default ('none'). I did change it to 16, but not seeing any change in other websites. Since I reverted to 11.2, don't currently have a 11.3 to test, but will keep in mind if I get back up to 11.3. It seems interesting that it is not an issue in 11.2, even though the GUI appears to be basically the same as 11.3 (based on the short time I had 11.3 running)...

 

[LizardJM]

Tigersharke
I just looked at the font settings again in Firefox as per winniwlinnie's post. There is a check box for:
'Allow pages to choose their own fonts, instead of your selections above'
which was checked on my copy (again, I assume the default, since this was a recent clean install of Firefox), which, one would hope, would mean it wouldn't mess with the web page settings. Again, 11.2 doesn't seem to exhibit this issue, so it would seem that some code changed with 11.3 regarding styles.

If I can scrape together a machine that will run 11.3, I may look at this some more and play with browser settings some more, but its not a deal breaker by any means - Chrome does seem to handle it better, I just currently have been using Firefox for everything else (and the FreeNAS manual seems to recommend Firefox if having GUI issues).

Also, just noticed - if I zoom (way) in on other websites, I can still scroll to the very bottom of the page. Zooming breaks the ability to scroll to the bottom of the page on 11.3 (zooming out is the work around). Not so on 11.2 - if I zoom way in on the System/General page, I can still scroll to the bottom and see the buttons. Something is odd with the scrolling function...

 

[Tigersharke]

My experience with firefox and that setting is inconsistent for one reason or other, so I gave up and set font and font size (separately) using stylus, which also permits tickbox to exclude domains or urls (or both) from this adjustment.

As for this FreeNAS GUI issue, somehow I suspect that it will look perfectly on a smartphone.

My efforts on Ganz großes Kino -dark theme for this forum is in CSS. My philosophy on function and design of the theme is to cater to large viewports and manipulate the content to fit small ones (like smartphones) and by way of units that relate to proportional sizes and less (or none) special segmented adjustments tied to specific dimensions. I have not ever looked at the FreeNAS GUI in this manner, so I truly have no idea how it was assembled.