X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Why does FF18 (and not older releases) have new, severe font display issues in some contexts?

Posted

When I upgraded to FF18 in Windows XP, all the sample pages (more than 200) in my portfolio site were effectively rendered unreadable in FF18 in XP. I also noticed the darker themes in Gmail had some of the same issues, though much less severe. I see none of these problems in FF18 on OS X using the latest version of the OS (Version 10.8: "Mountain Lion"). The issues seem to have no relationship to the fonts specified, although on one system, the bolder Arial in Gmail's top menubar looked much worse than unbolded Arial inside the inbox.

I narrowed down the portfolio page issues to two main contributing factors:

1. Translucent CSS opacity setting in a non-containing layer below the layer containing the text. To try being a bit more clear, the layer that actually contained the text and its background was NOT using any opacity settings. Think of the lightbox effect, if you've heard of that, to pop-up a page inside the existing browser window rather than in a new window, which typically uses a translucent overlay outside of the text area that reveals some of the background of the opening page.

2. The text layer used white and other light-colored text on a dark background (#262626).

Although I've I spent several days redesigning and reworking my pages to protect them from future potential rendering issues, I'd still like to know more about what's causing this. I've worked around somewhat similar issues in other browsers (mainly ie and chrome), but never so severe as these latest ones in FF18.

I tried unchecking the hardware acceleration checkbox in Options, and tried reversing the gfx 'azure' and '2d' options in about:config. I also tried disabling all add-ons. However, none of this made any difference in either Gmail or my own pages.

I can't realistically ask my potential clients to fiddle with all of these settings, so that is a major reason for asking. I could post a couple of screenshots of my Gmail inbox, although I don't see any place in this form for file uploads.

Additional System Details

Installed Plug-ins

  • Amazon MP3 Downloader Plugin 1.0.17
  • Google Update
  • Shockwave Flash 10.0 r32
  • DRM Netscape Network Object
  • Npdsplay dll
  • DRM Store Netscape Plugin

Application

  • User Agent: Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0

More Information

Application Basics
Name
Firefox
Version
18.0.1
User Agent
Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0
Build Configuration
about:buildconfig
Extensions
Name
Version
Enabled
ID
Firebug
1.10.3
true
firebug@software.joehewitt.com
FireFTP
2.0.7
true
{a7c6cf7f-112c-4500-a7ea-39801a327e5f}
Java Quick Starter
1.0
false
jqs@sun.com
Important Modified Preferences
Name
Value
accessibility.typeaheadfind.flashBar
0
browser.cache.disk.capacity
358400
browser.cache.disk.smart_size.first_run
false
browser.cache.disk.smart_size.use_old_max
false
browser.cache.disk.smart_size_cached_value
358400
browser.history_expire_days.mirror
180
browser.places.importBookmarksHTML
false
browser.places.smartBookmarksVersion
4
browser.search.update
false
browser.startup.homepage
http://www.google.com/
browser.startup.homepage_override.buildID
20130116073211
browser.startup.homepage_override.mstone
18.0.1
browser.tabs.warnOnClose
false
browser.urlbar.default.behavior
1
dom.mozApps.used
true
extensions.lastAppVersion
18.0.1
font.internaluseonly.changed
true
gfx.direct2d.disabled
true
layers.acceleration.disabled
true
network.cookie.cookieBehavior
1
network.cookie.lifetimePolicy
2
network.cookie.prefsMigrated
true
places.database.lastMaintenance
1358974309
places.history.expiration.transient_current_max_pages
53396
print.print_printer
MIT Library Printer
print.printer_MIT_Library_Printer.print_bgcolor
false
print.printer_MIT_Library_Printer.print_bgimages
false
print.printer_MIT_Library_Printer.print_command
print.printer_MIT_Library_Printer.print_downloadfonts
false
print.printer_MIT_Library_Printer.print_edge_bottom
0
print.printer_MIT_Library_Printer.print_edge_left
0
print.printer_MIT_Library_Printer.print_edge_right
0
print.printer_MIT_Library_Printer.print_edge_top
0
print.printer_MIT_Library_Printer.print_evenpages
true
print.printer_MIT_Library_Printer.print_footercenter
print.printer_MIT_Library_Printer.print_footerleft
&PT
print.printer_MIT_Library_Printer.print_footerright
&D
print.printer_MIT_Library_Printer.print_headercenter
print.printer_MIT_Library_Printer.print_headerleft
&T
print.printer_MIT_Library_Printer.print_headerright
&U
print.printer_MIT_Library_Printer.print_in_color
true
print.printer_MIT_Library_Printer.print_margin_bottom
0.5
print.printer_MIT_Library_Printer.print_margin_left
0.5
print.printer_MIT_Library_Printer.print_margin_right
0.5
print.printer_MIT_Library_Printer.print_margin_top
0.5
print.printer_MIT_Library_Printer.print_oddpages
true
print.printer_MIT_Library_Printer.print_orientation
1
print.printer_MIT_Library_Printer.print_pagedelay
500
print.printer_MIT_Library_Printer.print_paper_data
1
print.printer_MIT_Library_Printer.print_paper_height
11.00
print.printer_MIT_Library_Printer.print_paper_size_type
0
print.printer_MIT_Library_Printer.print_paper_size_unit
0
print.printer_MIT_Library_Printer.print_paper_width
8.50
print.printer_MIT_Library_Printer.print_reversed
false
print.printer_MIT_Library_Printer.print_scaling
2.00
print.printer_MIT_Library_Printer.print_shrink_to_fit
false
print.printer_MIT_Library_Printer.print_to_file
false
print.printer_MIT_Library_Printer.print_unwriteable_margin_bottom
0
print.printer_MIT_Library_Printer.print_unwriteable_margin_left
0
print.printer_MIT_Library_Printer.print_unwriteable_margin_right
0
print.printer_MIT_Library_Printer.print_unwriteable_margin_top
0
privacy.clearOnShutdown.offlineApps
true
privacy.clearOnShutdown.passwords
true
privacy.clearOnShutdown.siteSettings
true
privacy.cpd.offlineApps
true
privacy.cpd.siteSettings
true
privacy.donottrackheader.enabled
true
privacy.sanitize.migrateFx3Prefs
true
privacy.sanitize.sanitizeOnShutdown
true
privacy.sanitize.timeSpan
0
security.disable_button.openCertManager
false
security.warn_viewing_mixed
false
Graphics
Adapter Description
Intel(R) G33/G31 Express Chipset Family
Adapter Drivers
igxprd32
Adapter RAM
Unknown
Device ID
0x29c2
Direct2D Enabled
Blocked for your graphics driver version.
DirectWrite Enabled
false (0.0.0.0)
Driver Date
6-11-2008
Driver Version
6.14.10.4957
GPU #2 Active
false
GPU Accelerated Windows
0/1 Basic Blocked for your graphics driver version. Try updating your graphics driver to version 6.1400.1000.5218 or newer.
Vendor ID
0x8086
WebGL Renderer
Blocked for your graphics driver version. Try updating your graphics driver to version 6.1400.1000.5218 or newer.
AzureCanvasBackend
cairo
AzureContentBackend
none
AzureFallbackCanvasBackend
none
JavaScript
Incremental GC
true
Accessibility
Activated
false
Prevent Accessibility
0
Library Versions
Expected minimum version
Version in use
NSPR
4.9.4
4.9.4
NSS
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSSMIME
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSSSL
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSUTIL
3.14.1.0
3.14.1.0

Helpful Reply

This form has a file upload input, so here're two screens showing details of the text lines in my Gmail inbox on a darkly-backgrounded theme using FF18 for Win XP.

The first is with the hardware acceleration checkbox checked, the second, with it unchecked.

I don't see much difference, if any, in these renderings.

Helpful Reply

Here're two screenshots showing the more severely unreadable rendering when a non-containing translucent layer is below the text layer (Item #1 in opening post).

1: The first screenshot shows 13px Calibri (Windows system font) body text at #ffffff (white) foreground color body text over a #262626 (dark gray) background. The background color of the 0.5 opacity translucent layer (visible at top and left sides of screenshot) is #DFDBCD. The subheads are 18px #fff Calibri.

2: The second screenshot shows 13px body text at #ffffff (white) foreground color body text using an open source font over a #262626 (dark gray) background. The background color of the 0.5 opacity translucent layer (visible at top and left sides of screenshot) is #DFDBCD. The subheads are 18px #fff using an open source font.