Tracking down a line or object height issue
The attached images say it all. I'm working with a week-old install of 78.0.2 on my MacBook Pro, and even when I restart with add-ons disabled I'm having this issue on elements of just about webpage I visit, including the dropdown menu here.Why is Firefox doing this?
Soluzione scelta
It seems that I may have solved this problem. I started having the gibberish problem in certain Google menus, and found information about that relating to issues with a Helvetica font at some point in the past. I'm not using Helvetica for anything, but I was letting websites select their font instead of using the fonts set Firefox wants to use.
Went into the Advanced menu under Fonts and Colors, unchecked "Allow pages to choose their own fonts, instead of your selections above", and both the gibberish and the line space issues resolved. I realize this is the opposite of what was suggested above, but it seems to have done the trick.
Leggere questa risposta nel contesto 👍 0Tutte le risposte (20)
Many site issues can be caused by corrupt cookies or cache.
Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.
- How to clear the Firefox cache {web link}
If there is still a problem, Start Firefox in Safe Mode {web link} by holding down the <Shift> (Mac=Options) key, and then starting Firefox.
A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help?
While you are in safe mode;
Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches.
How to disable Hardware Acceleration {web link}
Check your zoom controls.
<Control> (Mac=<Command>) + (plus) enlarge - (minus) reduce 0 (zero) restore
FredMcD said
Many site issues can be caused by corrupt cookies or cache. Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.If there is still a problem, Start Firefox in Safe Mode {web link} by holding down the <Shift> (Mac=Options) key, and then starting Firefox. A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help? While you are in safe mode; Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches. How to disable Hardware Acceleration {web link}
- How to clear the Firefox cache {web link}
Thank you for the suggestions. They had no affect. I don't see this issue on every site I visit, but the sites I do see it on are unrelated enough to suggest that the issue is somewhere in the browser itself.
FredMcD said
Many site issues can be caused by corrupt cookies or cache. Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.If there is still a problem, Start Firefox in Safe Mode {web link} by holding down the <Shift> (Mac=Options) key, and then starting Firefox. A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help? While you are in safe mode; Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches. How to disable Hardware Acceleration {web link}
- How to clear the Firefox cache {web link}
abubakarmujahid672 said
FredMcD said
Many site issues can be caused by corrupt cookies or cache. Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.If there is still a problem, Start Firefox in Safe Mode {web link} by holding down the <Shift> (Mac=Options) key, and then starting Firefox. A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help? While you are in safe mode; Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches. How to disable Hardware Acceleration {web link}
- How to clear the Firefox cache {web link}
Thank you. Someone already copy/pasted this and I already replied that it had no affect.
I will also add the reminder that one of the images is the drop-down menu from this website. This morning is the first time I've been on the Mozilla support site with this computer and the first time I've created an account. While a corrupt cookie could ultimately be the answer here, I think the odds of having a corrupt cookie so quickly are pretty low. In fact, the only commonality I'm finding is with system-generated pop-ups. See the attached image for another example.
There has to be some sort of line or code error with an element. I'd say a stylesheet error, but the sites are unrelated. I just don't know what the element is that drives this or what the error might be.
The issue with the font can happen if you have increased the default minimum font size and the website uses absolute positioning (zooming text only can cause similar issues).
If you have made changes to Advanced font-size settings like increasing the minimum/default font-size then try the Default font-size setting "16" and the Minimum font-size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> General: Fonts & Colors -> Advanced -> Minimum Font Size (none)
Make sure you allow pages to choose their own fonts.
- Options/Preferences -> General: Fonts & Colors -> Advanced
[X] "Allow pages to choose their own fonts, instead of my selections above"
It is better not to increase the minimum font-size, but to use the builtin Firefox Zoom feature.
- Options/Preferences -> General -> Language and Appearance -> Zoom
cor-el said
The issue with the font can happen if you have increased the default minimum font size and the website uses absolute positioning (zooming text only can cause similar issues).
If you have made changes to Advanced font-size settings like increasing the minimum/default font-size then try the Default font-size setting "16" and the Minimum font-size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> General: Fonts & Colors -> Advanced -> Minimum Font Size (none)
Make sure you allow pages to choose their own fonts.
- Options/Preferences -> General: Fonts & Colors -> Advanced
[X] "Allow pages to choose their own fonts, instead of my selections above"It is better not to increase the minimum font-size, but to use the builtin Firefox Zoom feature.
- Options/Preferences -> General -> Language and Appearance -> Zoom
Thank you. This was already suggested and tried. I haven't touched the zoom or font size settings since I installed the browser a couple weeks ago on this new machine. Additionally the only add-ons I'm using are Ad Block Plus and the suggested Facebook "fence". Safe mode had no affect on this issue.
Are you possibly overriding the font that the website specifies as a font that takes more space also can cause this ?
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text.
You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
It didn't solve the problem, but I'm definitely getting somewhere. As you can see from this screenshot, everything is default, at least as far as I can tell. Next to that, you can see a line height change that is greyed out. It was 'normal' when I opened Inspector, and changing that variable did fix the problem somewhat, but only for the element I had selected.
You can click the icon at the right end of the line-height line to filter for this specific CSS property as there are rules with a higher specificity.
Okay. The issue for me is I'm not looking to do any customization like this, and until tinkering with this after following the directions you linked, I haven't messed with any of this. Other than an ad blocker, I'm perfectly fine with the browser as installed. My next step is to uninstall Firefox and reinstall it to see what happens. My install updated to 79.0 today and it had no effect.
Your above posted screenshot doesn't show what font is used and using a font that takes more space is a possible cause although a font-size of 13px isn't that high that it should cause problems.
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required) where you have these issues ?
That page uses Helvetica and variations thereof.
The three original screen shots I included are from Facebook, specifically when you navigate away from an open post, support.mozilla.org, specifically the "Which topic best describes your question?" drop-down when you ask a question, and https://trackforum.org. The fourth screen shot is from jalopnik.com, specifically when you go to close a window mid-edit. In the case of the pop-ups, the buttons are not sizing to the default font, and with trackforum it appears like the row height or spacing doesn't match the font size.
In all four cases I do not have the same issues with Safari
I'm circling back to this after being without power last week (thanks Isaias!) with a screen shot comparing the same page on Firefox (left) and Safari. It seems like there has to be a line of code somewhere that is dictating cell height, because the font appears at least to be the same size in both browsers, which are the browser defaults.
Soluzione scelta
It seems that I may have solved this problem. I started having the gibberish problem in certain Google menus, and found information about that relating to issues with a Helvetica font at some point in the past. I'm not using Helvetica for anything, but I was letting websites select their font instead of using the fonts set Firefox wants to use.
Went into the Advanced menu under Fonts and Colors, unchecked "Allow pages to choose their own fonts, instead of your selections above", and both the gibberish and the line space issues resolved. I realize this is the opposite of what was suggested above, but it seems to have done the trick.
Note that you lose small images (icons) supplied via a special icon font that is downloaded via internet if you uncheck "Allow pages to choose their own fonts, instead of my selections above".
cor-el said
Note that you lose small images (icons) supplied via a special icon font that is downloaded via internet if you uncheck "Allow pages to choose their own fonts, instead of my selections above".
I guess the risk is minimized by using a font set that contains the special icons. I'm using Arial right now.
This is about a font like Font Awesome.
cor-el said
This is about a font like Font Awesome.
Thanks for the info. One thing I have learned about not allowing websites to choose their fonts is that it screws up .pdf documents views in Firefox.