Why this page can bypass the fixed color setting with Firefox?

dedec0 · 07-07-2018, 09:21 PM

Hello. I wonder why the following happens.

System: Debian 9 (Stretch)

Browser: Firefox ESR 52.2.0

Main browser setting to show the problem in this thread:

1. Open the URL about:preferences#content in a tab;

2. Click the "Colors" button;

3. Change "standard colors" with a light color for text, and a very dark color for background;

4. Uncheck "use system colors";

5. Use light colors for visited and new links;

6. Check "underline";

7. Change the popdown menu "substitute page colors with above settings" to "always" and click "ok"

For some pages, text colors are somehow bypassed. And I know how to point pages that do that with text written in images, or transparency "tricks" that assume everybody will use pure white background. It is not the case I am talking about.

To give a specific example, the page for the Diccionario de la lengua española from Real Academia Española - a great spanish dictionary - does not work.

Just one sad note: the example page below refuses to work without javascript.

Try this:

http://dle.rae.es/?id=VVCmeE4

The above address should point to the page with the meaning of recorrido.

With the said browser and settings, I the page is shown like this:

http://imgbox.com/OD4zsAEM

The image is large, very tall. You may want to It is the whole page, not only a visible part of it.

The key part where we see the problem, in a mix of our text color, black text and our link color, has this written:

Quote:

Originally Posted by http://dle.rae.es/?id=VVCmeE4

recorrido

1. m. Acción y efecto de recorrer.

2. m. Espacio que ha recorrido, recorre o ha de recorrer alguien o algo.

3. m. Ruta, itinerario prefijado.

4. m. Acción de reparar (‖ arreglar lo estropeado).

dar un recorrido a alguien

1. loc. verb. Hacerle objeto de una reprensión o corrección por alguna falta.

Real Academia Española © Todos los derechos reservados

Can you point me what trick this page does to have text that bypass those settings? I imagine a CSS property, but I only know the most basic of that.

The answer for the above question may say the following but, just in case... should this situation be considered a Firefox bug? Or a problem with that page, and also others with similar characteristics?

frankbell · 07-07-2018, 09:54 PM

Have you checked the Firefox docs to make sure a step didn't get overlooked?
https://support.mozilla.org/en-US/kb...s-websites-use

scasey · 07-07-2018, 10:18 PM

In that page, there are links to several css files:

Code:

<link rel="stylesheet" type="text/css" href="css/I.skel.css.pagespeed.cf.TBARrhDurI.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css.pagespeed.ce.jfq2GI04XX.css"/>
<link rel="stylesheet" type="text/css" href="css/I.style-wide.css.pagespeed.cf.UHRP88d7na.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tinos:400,700&amp;subset=latin,greek-ext"/>
<link rel="stylesheet" type="text/css" href="css/popup.css+jquery.keypad.css+jquery-ui.css+drae.css.pagespeed.cc.Sl9aWxIZE_.css"/>

the last of which contains (along with a bunch of more stuff) this:

Code:

/*! jQuery UI - v1.11.4 - 2015-03-11
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */

I make that 18 included css files(!)

And that's without looking at the eight linked javascript files...

I know I'm not answering your question, but I'm not inclined to dig through all that code...if you want to, right click on the page and select "View page source"...the source will open in a new tab, and you can click on the ones that are hyperlinked. You'll need to put the others in the address bar to see the code.

dedec0 · 07-07-2018, 11:20 PM

Quote:

Originally Posted by frankbell

Have you checked the Firefox docs to make sure a step didn't get overlooked?
https://support.mozilla.org/en-US/kb...s-websites-use

No, I had not. Firefox discourage me using its menu "file > help > [...]" because it will open a page in the wrong window, which is annoying. So I just do web searches for most things, if any. For the "force color" features, I never thought it should have any detail to miss. Anyway, I will read that page now. Thank you! (:

And the example is much more complicated than I expected it to be, as scasey detailed. But I did not care to check that, assuming a fairly complex CSS for my knowledge, and also imagining that a simple answer like "In http://some/file.css line N we have [...]" was not hard to get.

I will try to save one example page from DLE and reduce it - doing mostly a "destruct more, see if the problem remains there", with some attention to keep easy references to the original source. I will report soon if I find anything without much difficulty.

AwesomeMachine · 07-08-2018, 06:57 PM

I'm not positive, but it seems that the links in black text in the linked images are not straight HTML hyperlinks. Here is the selection source for the word 'Acción' on that page:

Quote:

4. <abbr class="g" title="nombre masculino">m.</abbr> Acción de <a class="a" href="?id=W0NbaIw#Dg3s2zl" style="cursor: pointer;">reparar</a> (‖ arreglar lo estropeado).

dedec0 · 08-19-2018, 06:17 AM

Quote:

Originally Posted by AwesomeMachine

I'm not positive, but it seems that the links in black text in the linked images are not straight HTML hyperlinks. Here is the selection source for the word 'Acción' on that page:

The black texts are not links. The 4 numbered items below "recorrido" are four meanings for that spanish word. The only link in this part is "reparar", on item 4. Further below we see an expression that uses "recorrido", underlined in it (but not a link!), and its meaning below it, also in black.

I had never seen a mark tag before, but it exists in HTML 5 only, and not in HTML 4.01 or previous standards:

https://duckduckgo.com/html?q=html%20mark%20tag

https://www.w3schools.com/TAgs/tag_mark.asp

Is this situation considered a bug in Firefox 52 with the said settings?

dedec0 · 08-19-2018, 06:34 AM

Quote:

Originally Posted by AwesomeMachine

I'm not positive, but it seems that the links in black text in the linked images are not straight HTML hyperlinks. Here is the selection source for the word 'Acción' on that page:

Before making this thread, I tried to check the page source code. What I did is "ctrl+u". But the word meaning parts are not shown there! Before writing #6, I wanted to check the same source code you quoted. Tried ctrl+u again. And what I thought I had to do was right click and "inspect element". But your words ringed a bell in my head: I selected the first word meaning, right clicked that, and chose "see selected source code" - something I did not even imagined that would exist.

A very nice discovery for me! :D I will probably use it frequently...