Graphics are large and blurry
I recently noticed that the graphics in Firefox have become large and blurry. It's like they are all being zoomed automatically. I can't pinpoint exactly when this started, but I'm sure it hasn't been like this forever, because it would have driven me crazy long ago! I didn't change any of the settings myself, so I wonder if it has something to do with a Firefox update.
Anyway, when looking at websites, I have to zoom out twice from the default zoom state before images look crisp again.
However, the issue also applies to graphics that are part of the Firefox interface. For example, the icons in my bookmarks toolbar are blurry. So are the home icon, the downloads icon, and other built-in graphics that I can't zoom.
Chosen solution
Code changes regarding HiDPI support for high resolution displays have landed in Firefox 22 and later (bug #844604).
You can modify the layout.css.devPixelsPerPx and increase or decrease the value in 0.1 or 0.05 steps to adjust the size of fonts and other elements in Firefox.
- The layout.css.devPixelsPerPx pref is a String value parsed to a float and allows to fine tune the dimensions of all elements (user interface and web pages) more precisely (resolution 0.1 or 0.05).
- Change the default value -1 to 1 to make it work like in previous Firefox versions (100%)
Start with a value of 1 and adjust this value with 0.1 steps or 0.05 for finer adjustments.
- Use values between 1.0 and about 0.5 to reduce elements in size (do NOT go all the way to 0.05!)
- Use values greater than 1.0 to magnify and make elements larger (percentage divided by DPI, % / DPI).
- http://kb.mozillazine.org/about:config
If web pages needs to be adjusted after changing this pref then you can look at the Default FullZoom Level or NoSquint extension.
- Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
- NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/
Use this extension to adjust the font size for the user interface:
- Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
All Replies (10)
Chosen Solution
Code changes regarding HiDPI support for high resolution displays have landed in Firefox 22 and later (bug #844604).
You can modify the layout.css.devPixelsPerPx and increase or decrease the value in 0.1 or 0.05 steps to adjust the size of fonts and other elements in Firefox.
- The layout.css.devPixelsPerPx pref is a String value parsed to a float and allows to fine tune the dimensions of all elements (user interface and web pages) more precisely (resolution 0.1 or 0.05).
- Change the default value -1 to 1 to make it work like in previous Firefox versions (100%)
Start with a value of 1 and adjust this value with 0.1 steps or 0.05 for finer adjustments.
- Use values between 1.0 and about 0.5 to reduce elements in size (do NOT go all the way to 0.05!)
- Use values greater than 1.0 to magnify and make elements larger (percentage divided by DPI, % / DPI).
- http://kb.mozillazine.org/about:config
If web pages needs to be adjusted after changing this pref then you can look at the Default FullZoom Level or NoSquint extension.
- Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
- NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/
Use this extension to adjust the font size for the user interface:
- Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
Modified
Hi,
I have actually the same problem, after upgrading Firefox 21 to 22 I just recognized the same "blurring"-problem. I didn't change any DPI-Settings on my OS (Windows 8 64Bit) or some other graphic settings! I tried to reinstall, deinstall, etc. firefox, nothing had changed!
The problem is that your solution don't really solve that issue. By changing the pref it's able to change the interface DPI of firefox, but it didn't really adapt that on the whole websites. Nevertheless, the default DPI of Windows8 is "125%", I just put that parameter on 100% opened Firefox and the problem disappeared, but I can't really use that setting on my OS! Then, I put the DPI of win back to the default and tried to find the "best" pref in the firefox config for the DPI. When you put that parameter to 1.0 it should get the default dpi of firefox, but actually it's too small. Then I have to zoom in twice on every website and that's extremely irritating over some time...
On the other side, I installed Firefox 22 on my Laptop (win7) and there isn't such an issue. Are there some other settings I could change? Or is it just a bug on firefox 22 windows8?
Edit: I just found out, that the default DPI of win8 is 125 and for win7 just 100! That means, that there is a problem in firefox, so it won't calibrate the interface on 125 dpi
Modified
Hi mathew11, Firefox 22 is a DPI-aware program. What should happen is that Firefox uses your Windows DPI level of 125% to adjust the "chrome" area (menus, toolbars, and tabs) to look the same as other Windows apps, and to zoom the content area by 25% compared with the old appearance.
If the content zooming is too much, you can counteract that with one of these add-ons, setting your default zoom level to, for example 90% to reduce the zooming to 12.5% or 80% to cancel it altogether.
- Default FullZoom Level - for content area
- NoSquint - for content area
Can you find a value you like?
Hi jscher2000!
Thank you for your fast reply. I already noticed, that there are these Addons to solve that problem. I was just wondering, because I firstly thought, that it is a bug/error. It's not a problem for me to do a workaround, but what if thousands of other Users have the same problem after that update to Firefox 22, especially when they are limited by their bad IT-skills/KnowHow and don't know how to solve that. And instead of searching for a solution, they'll maybe change to another Browser(Chrome, Opera, etc.) Therefore I was confused that Firefox is doing that.
Best regards,
Did you previously made changes in Windows or in Firefox as a workaround to improve the appearance on web pages (e.g. font size or page zoom)?
If this is the case then such changes may now work against you and may need to be reversed are adjusted to accommodate switching on HiDPI support in Firefox.
I just set the DPI from 120 to 100 on Windows8, so there is no scaling problem on firefox anymore, actually I didn't know that 120 is the default DPI on Win8, I thought it's also 100 as on Win7, etc. . So I did that modification and recognized that it's even better for me to work with 100, instead of 120. I was also wondering, why some icons of the taskbar after Win8 installation are blurry too. So, it seems that Win8 made a bad mistake, because they set the default dpi to 120... Anyway, I didn't change other settings like fontsize or page zoom, I'm not using the Addons, which are listed in the posts above. But now, it works, I tested it on a lot of websites and there are no problems anymore, but thank you for your advice! Best regards,
On my setup it seems that in some parts of the interface the OS's DPI settings are not being applied.
I have Windows 7 64bit, I use 150% DPI scaling, with "Use Windows XP style DPI scaling" enabled. I also use Default FullZoom Level. My content area is OK (i.e. non-blurry), as well as the font in the interface, and the checkboxes that are part of the interface (eg. in the find dialog above the status bar). However, the icons in the interface (at least those that come with the add-ons) are blurry, as well as the text "F100%" (Defaul FullZoom level).
You can see how my firefox looks like in the attached snapshot.
Modified
I'm not noticing larger font or blurring on web pages, only on my header/toolbar when Firefox is not the "active" page. For example, if I click off of firefox and into my email the toolbar turns pale and blurry...I'm attaching a screen shot. Please let me know if there is a fix for this.
Hi monicak, are you using the built-in Firefox theme or one of the many optional themes that change the appearance of the toolbar area? It's normal on Windows for the text of the menu bar to be faded on a window when it is no longer the active window, but the attractiveness of the text may depend on your theme.
Looks that you have a Persona (lightweight theme) installed that isn't working properly.