Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Contents of <pre> tags are transparent

  • 5 replies
  • 6 have this problem
  • 1 view
  • Last reply by rjcal

more options

Hi, thanks for your time. I am unable to view the contents of text boxes containing source code in Firefox. Here is a page that does not work, for example: <https://help.ubuntu.com/community/OperaBrowser>. All text contained within the <pre> tags displays, but is completely white / transparent. (In other words, I can view the text by copying it into a text editor, or right-clicking on the element and selecting "Inspect Element.") In a separate browser (Opera), such text displays just fine. I am running Firefox 56.0 on Ubuntu 16.04. I've already tried all the standard steps referenced here (<https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems), including restarting in safe mode, not using plug-ins, using a different profile, and reinstalling Firefox. None of these approaches solves the problem. As suggested here (<https://support.mozilla.org/bm/questions/1154399>), I also tried uninstalling gsfonts, but that did not help either. This is a recent problem, and it shows up on multiple sites (i.e. udacity.com and ubuntu.com). I cannot rule out malware but think it is unlikely that it would only affect Firefox and have this particular symptom. I am also able to view the pages correctly running Firefox 51.0.1 on a fresh installation of Ubuntu 16.04 on an external USB.

I have screenshots in .png format but they're taking a long time to upload for some reason.

Thank you very much for any help you can provide!

Hi, thanks for your time. I am unable to view the contents of text boxes containing source code in Firefox. Here is a page that does not work, for example: &lt;https://help.ubuntu.com/community/OperaBrowser&gt;. All text contained within the &lt;pre&gt; tags displays, but is completely white / transparent. (In other words, I can view the text by copying it into a text editor, or right-clicking on the element and selecting "Inspect Element.") In a separate browser (Opera), such text displays just fine. I am running Firefox 56.0 on Ubuntu 16.04. I've already tried all the standard steps referenced here (&lt;https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems), including restarting in safe mode, not using plug-ins, using a different profile, and reinstalling Firefox. None of these approaches solves the problem. As suggested here (&lt;https://support.mozilla.org/bm/questions/1154399&gt;), I also tried uninstalling gsfonts, but that did not help either. This is a recent problem, and it shows up on multiple sites (i.e. udacity.com and ubuntu.com). I cannot rule out malware but think it is unlikely that it would only affect Firefox and have this particular symptom. I am also able to view the pages correctly running Firefox 51.0.1 on a fresh installation of Ubuntu 16.04 on an external USB. I have screenshots in .png format but they're taking a long time to upload for some reason. Thank you very much for any help you can provide!

Modified by cor-el

Chosen solution

Update #3: I found a solution. I went into Edit --> Preferences --> General --> Fonts --> Advanced... and unchecked "Allow pages to choose their own fonts, instead of your selections above". The text in question then displays properly, with the default Monospace font (DejaVu Sans Mono) selected under "Fonts for Latin", and also with "Courier" selected as the Monospace font. It would be great if someone were able to explain why "monospace" fails as a font family, though, when specified by the web page...I'll mark this as the solution but please post back if you have more information.

Thanks!

Read this answer in context 👍 2

All Replies (5)

more options

I have no issue seeing the text.

Might want to do the following : Note : Firefox 56.0.2 is current release https://www.mozilla.org/firefox/all/ Full Version Installer

Also please do this as your enrolled in a study : Would you go to : Options => Privacy & Security => under 'Data Collection and Use' : Did you uncheck : 'Allow Firefox to install and run studies ' or is it checked  ? If checked UN-Check it.

Type in the address bar about:studies Any extensions that you see listed there, you can either disable or remove, just like this Safe Browsing version 4 (at the end of the experiment they will be disabled anyway). See for further information : https://support.mozilla.org/en-US/kb/shield Restart Firefox after removal and see if anything improves.

Note : Firefox 57 Quantum release date Nov 14th https://www.mozilla.org/en-US/firefox/quantum/ Note : Legacy Extensions will be disabled and or removed.

Please let us know if this solved your issue or if need further assistance.

more options

If the text looks transparent then a possible cause is that the text and background colors are the same. This can happen if the default colors have been changed or swapped (inverted text/background or dark theme) and the website only changes one of them.

more options

@Pkshadow and @cor-el, thank you very much. I installed Firefox 56.0.2. Then indeed "Allow Firefox to run and install studies" was checked, so I unchecked it. Under "about:studies", Safe Browsing 4 was the only study installed, and I clicked on "remove", disabling it. After a reboot of the OS, the problem persisted.

Then I decided to debug this by taking the source code at <https://help.ubuntu.com/community/OperaBrowser>, saving it locally, and changing the links in the file from relative to static links. I was able to isolate the CSS code that was not getting properly interpreted by Firefox: for that particular page the CSS code is at https://help.ubuntu.com/moin_static193/light/css/styles.css:226-233:

pre {

   background-color:#F3F3F3;
   border:1px dashed #C1B496;
   font-family:UbuntuMono,courier,monospace;
   padding:4pt;
   white-space:pre-wrap;
   word-wrap:break-word;

}

In particular, if I change the fourth line to:

font-family:UbuntuMono,Ariel,monospace;

I am able to see the text. It looks like my installation of Firefox isn't able to render Courier font, although at least Opera can do so. Maybe those fonts are in a non-standard directory for my installation of Ubuntu, or else Opera uses a default font if it can't find Courier? I'm going to keep debugging this, but please post back if you already know what's going on...thanks!

(Update: the original site that wasn't working for me also uses Courier in the definition for the
 tag in its style sheet file.)

Modified by rjcal

more options

Update #2: I can see with a call to fc-list that I have plenty of Courier fonts installed on my OS, I just don't know how Firefox looks for them and why it is not finding one. So now I am stuck.

more options

Chosen Solution

Update #3: I found a solution. I went into Edit --> Preferences --> General --> Fonts --> Advanced... and unchecked "Allow pages to choose their own fonts, instead of your selections above". The text in question then displays properly, with the default Monospace font (DejaVu Sans Mono) selected under "Fonts for Latin", and also with "Courier" selected as the Monospace font. It would be great if someone were able to explain why "monospace" fails as a font family, though, when specified by the web page...I'll mark this as the solution but please post back if you have more information.

Thanks!

Modified by rjcal