X
Tap here to go to the mobile version of the site.

Support Forum

Why is Firefox showing these random characters in place for images?

Posted

I have removed all add ins and extensions. Cleared browser cache and cookies and did the 'refresh' button on firefox.com

http://imgur.com/a/U7p5C

I have removed all add ins and extensions. Cleared browser cache and cookies and did the 'refresh' button on firefox.com http://imgur.com/a/U7p5C

Additional System Details

Installed Plug-ins

  • Adobe® Acrobat® Plug-in for Web Browsers, Version 10.1.15
  • A plugin to detect whether the Adobe Extension Manager is installed on this machine.
  • Provides information about the default web browser
  • Displays Java applet content, or a placeholder if Java is not installed.
  • Shockwave Flash 19.0 r0
  • 5.1.40416.0
  • Universal Media Player

Application

  • Firefox 41.0.2
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0
  • Support URL: https://support.mozilla.org/1/firefox/41.0.2/Darwin/en-US/

Extensions

  • Adblock Plus 2.6.11 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • Firebug 2.0.12 (firebug@software.joehewitt.com)
  • Web Developer 1.2.5.1-signed ({c45c406e-ab73-11d8-be73-000a95be3b12})
  • Adobe Acrobat - Create PDF 1.2 (web2pdfextension@web2pdf.adobedotcom) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x0166
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x8086
  • driverDate:
  • driverVersion:
  • info: {u'AzureCanvasBackend': u'skia', u'AzureFallbackCanvasBackend': u'none', u'AzureContentBackend': u'quartz', u'AzureSkiaAccelerated': 0}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • supportsHardwareH264: False
  • webglRenderer: Intel Inc. -- Intel HD Graphics 4000 OpenGL Engine
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

More and more sites are using downloadable icon fonts instead of individual images for their buttons. When Firefox can't find a character in a font, it displays that tall box with the code of the missing character.

Usually this is caused by overriding website fonts with a standard set of fonts. You can check for and undo that change on the Preferences page:

"3-bar" menu button (or Firefox menu) > Preferences > Content

Click the "Advanced" button and if the checkbox for "Allow pages to choose their own fonts, instead of my selections above" is empty, go ahead and check it. Then OK that change.

If you reload the page, do the icons display?

More and more sites are using downloadable icon fonts instead of individual images for their buttons. When Firefox can't find a character in a font, it displays that tall box with the code of the missing character. Usually this is caused by overriding website fonts with a standard set of fonts. You can check for and undo that change on the Preferences page: "3-bar" menu button (or Firefox menu) > Preferences > Content Click the "Advanced" button and if the checkbox for "Allow pages to choose their own fonts, instead of my selections above" is empty, go ahead and check it. Then OK that change. If you reload the page, do the icons display?

Question owner

It was already checked.

It was already checked.
cor-el
  • Top 10 Contributor
  • Moderator
17421 solutions 157410 answers

Special icons are usually supplied by a font that is downloaded from the server (@font-face) as you might see by little boxes that show the hex code of the characters instead. If you have a font installed that covers this Unicode range then you may see a real character and not the little box with the CSS code.

You can check the gfx.downloadable_fonts.enabled pref on the about:config page and make sure that it is set to true (if necessary double-click the line to toggle its value to true).

You can open the about:config page via the location/address bar. You can accept the warning and click "I'll be careful" to continue.

Special icons are usually supplied by a font that is downloaded from the server (@font-face) as you might see by little boxes that show the hex code of the characters instead. If you have a font installed that covers this Unicode range then you may see a real character and not the little box with the CSS code. You can check the <b>gfx.downloadable_fonts.enabled</b> pref on the <b>about:config</b> page and make sure that it is set to true (if necessary double-click the line to toggle its value to true). You can open the <b>about:config</b> page via the location/address bar. You can accept the warning and click "I'll be careful" to continue. *http://kb.mozillazine.org/about:config

Question owner

It was already true.

It was already true.
cor-el
  • Top 10 Contributor
  • Moderator
17421 solutions 157410 answers

If you use extensions (Firefox menu button/Tools > Add-ons > Extensions) that can block content (e.g. Adblock Plus, NoScript, Flash Block, Ghostery) then make sure that such extensions aren't blocking content.

Start Firefox in Safe Mode to check if one of the extensions (Firefox menu button/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.

  • Switch to the DEFAULT theme: Firefox menu button/Tools > Add-ons > Appearance
  • Do NOT click the Reset button on the Safe Mode start window

You can check the Net log and the Network log in the Web Console (Firefox/Tools > Web Developer) to see if content fails to load or possibly is blocked (file size is zero).

Use Ctrl+F5 or Ctrl+Shift+R to reload the page and bypass the cache to generate a fresh log.

If you use extensions (Firefox menu button/Tools > Add-ons > Extensions) that can block content (e.g. Adblock Plus, NoScript, Flash Block, Ghostery) then make sure that such extensions aren't blocking content. Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox menu button/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem. *Switch to the DEFAULT theme: Firefox menu button/Tools > Add-ons > Appearance *Do NOT click the Reset button on the Safe Mode start window *https://support.mozilla.org/kb/Safe+Mode *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes ---- You can check the Net log and the Network log in the Web Console (Firefox/Tools > Web Developer) to see if content fails to load or possibly is blocked (file size is zero). *https://developer.mozilla.org/Tools/Network_Monitor Use Ctrl+F5 or Ctrl+Shift+R to reload the page and bypass the cache to generate a fresh log.
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Hmm, this is interesting. Netflix uses a font for their own logo on the home page. Talk about working without a net...

The font file that Firefox can use is this one: https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-72.woff

It will look like gibberish if you try to load it in a tab, but if you try it, does Firefox even load the file?

Hmm, this is interesting. Netflix uses a font for their own logo on the home page. Talk about working without a net... The font file that Firefox can use is this one: https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-72.woff It will look like gibberish if you try to load it in a tab, but if you try it, does Firefox even load the file?

Question owner

Gibberish confirmed jscher2000.

Gibberish confirmed jscher2000.

Question owner

Starting Firefox in Safemode did not fix the issue either.

Starting Firefox in Safemode did not fix the issue either.
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Could you try the Network Monitor (mentioned previously by cor-el). In your Netflix tab, open the Web Console at the bottom using Ctrl+Alt+k (or the Developer menu). Along the top of the console, click the Network button. Then reload the Netflix page bypassing the cache, using Cmd+Shift+r.

The network tab should fill with a list of files Firefox is requesting from the site. Can you find the font file? A 200 status indicates a successful retrieval. I have attached a screen shot for comparison.

(I don't know why it was served as text/plain since it clearly is not plain text...)

If the file is retrieved successfully but not applied, please check the Console section of the web console for any font-related error messages.

Could you try the Network Monitor (mentioned previously by cor-el). In your Netflix tab, open the Web Console at the bottom using Ctrl+Alt+k (or the Developer menu). Along the top of the console, click the Network button. Then reload the Netflix page bypassing the cache, using Cmd+Shift+r. The network tab should fill with a list of files Firefox is requesting from the site. Can you find the font file? A 200 status indicates a successful retrieval. I have attached a screen shot for comparison. (I don't know why it was served as text/plain since it clearly is not plain text...) If the file is retrieved successfully but not applied, please check the Console section of the web console for any font-related error messages.

Question owner

File was downloaded successfully.

File was downloaded successfully.

Question owner

Screenshot

Screenshot

Question owner

The console did spit this out for Netflix

The console did spit this out for Netflix

Question owner

I tried setting the key security.fileuri.strict_origin_policy to false suggested here and it did NOT work.

http://stackoverflow.com/questions/19817459/firefox-font-face-with-local-file-downloadable-font-download-failed

I tried setting the key ''security.fileuri.strict_origin_policy'' to '''false''' suggested here and it did NOT work. http://stackoverflow.com/questions/19817459/firefox-font-face-with-local-file-downloadable-font-download-failed

Question owner

I am getting the cross-origin request blocked on a lot of sites. This is why nothing is rendering correctly.

I am getting the '''cross-origin request blocked''' on a lot of sites. This is why nothing is rendering correctly.
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Hmm, "successful" retrieval but 0K in size, so retrieved an empty file.

The fileuri preference(s) relate to the file:// protocol, so that's not relevant to two different web domains.

Why would the CORS headers be blocked/stripped? Could you expand the headers and see whether Firefox is sending the Origin header in the request, and what kind of access control header you're getting in the response?

If Firefox sends the appropriate headers but you don't get the right headers back, perhaps there is a proxy or some privacy tool external to Firefox that is modifying the headers.

Hmm, "successful" retrieval but 0K in size, so retrieved an empty file. The fileuri preference(s) relate to the file:// protocol, so that's not relevant to two different web domains. Why would the CORS headers be blocked/stripped? Could you expand the headers and see whether Firefox is sending the Origin header in the request, and what kind of access control header you're getting in the response? If Firefox sends the appropriate headers but you don't get the right headers back, perhaps there is a proxy or some privacy tool external to Firefox that is modifying the headers.

Question owner

screenshot

screenshot

Question owner

mine appears to be coming from cdn.netflix.com yours is comeing from assets.netflix.com

mine appears to be coming from cdn.netflix.com yours is comeing from assets.netflix.com
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Yes, I'm not logged in, maybe that's why the server is different? But if I load your font file directly, I do get the access control header from the server. (Screen shot attached)

Are you accessing directly or through a proxy, private VPN, Hola, Tor, etc., that could be modifying what you receive?

Yes, I'm not logged in, maybe that's why the server is different? But if I load your font file directly, I do get the access control header from the server. (Screen shot attached) Are you accessing directly or through a proxy, private VPN, Hola, Tor, etc., that could be modifying what you receive?

Question owner

screenshot

screenshot
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Clearly it's different, but I don't know why. I think it's probably something external to Firefox, but a useful way to check is to create a second Firefox profile without customizations to see whether you get the same results. This will be in parallel to your regular settings so you can immediately switch back after testing.

Create a new Firefox profile

A new profile will have your system-installed plugins (e.g., Flash) and extensions (e.g., security suite toolbars), but no themes, other extensions, or other customizations. It also should have completely fresh settings databases and a fresh cache folder.

Please see our help article for how to call up the Profile Manager on Mac: Profile Manager - Create, remove, or switch Firefox profiles.

Important: Don't delete anything in the profile manager! There's no recovery for deletions.

Any time you want to switch profiles, exit Firefox and return to this dialog.

Click the Create Profile button, assign a name like TEST102115, and skip the option to relocate the profile folder. After creating the profile, select it and start Firefox in that profile.

Any difference with Netflix fonts?

When returning to the Profile Manager to switch back, you might be tempted to use the Delete Profile button for the TEST profile. But it's a bit too easy to accidentally delete your "real" profile, so I recommend resisting the temptation. If you do want to clean up later, I suggest making a backup of all your profiles first in case something were to go wrong.

Clearly it's different, but I don't know why. I think it's probably something external to Firefox, but a useful way to check is to create a second Firefox profile without customizations to see whether you get the same results. This will be in parallel to your regular settings so you can immediately switch back after testing. '''Create a new Firefox profile''' A new profile will have your system-installed plugins (e.g., Flash) and extensions (e.g., security suite toolbars), but no themes, other extensions, or other customizations. It also should have completely fresh settings databases and a fresh cache folder. Please see our help article for how to call up the Profile Manager on Mac: [[Use the Profile Manager to create and remove Firefox profiles]]. ''Important: Don't delete anything in the profile manager!'' There's no recovery for deletions. Any time you want to switch profiles, exit Firefox and return to this dialog. Click the Create Profile button, assign a name like TEST102115, and skip the option to relocate the profile folder. After creating the profile, select it and start Firefox in that profile. Any difference with Netflix fonts? When returning to the Profile Manager to switch back, you might be tempted to use the Delete Profile button for the TEST profile. But it's a bit too easy to accidentally delete your "real" profile, so I recommend resisting the temptation. If you do want to clean up later, I suggest making a backup of all your profiles first in case something were to go wrong.