List numbers become translucent if I make the background translucent

Question

I've been fighting a problem with a reveal.js presentation for months now, on and off. What happens is that if I make the background for my slide content translucent, then ol numbers, but not ul bullets, nor any other element that I can see, also become translucent to the same degree.

The over-arching question is how are list numbers styled? With the secondary question being, how could the color of the list numbers be tied to the background in this way?

I have scoured the reveal CSS (and there's a fair amount of it) to no avail. And, of course, I've inspected the elements involved in the browser tools. A big part of the problem is that I have no idea how to achieve such an effect deliberately; these are just stock HTML lists with stock CSS styling -- no funny business with content in CSS, etc.

Notice how the numbers are nearly invisible in the second image. As I vary the background color translucency, the translucency of the numbers varies with it.

The background is a single fixed div:

<div class="background"<% [WallpaperImage] %> style="background-image:url(<% WallpaperImage %>)"<% [/] %>></div>

With pretty straight-forward styling:

body > div.background {
    background                          : fixed border-box #000 center/cover no-repeat;
    bottom                              : 0;
    left                                : 0;
    position                            : fixed;
    right                               : 0;
    top                                 : 0;
    }

Nies

Could you make a self-contained example of both the background div and the list container with it's background that can re-create this easily? – Hards

@Hards : If I could do that, I'd have resolved the problem. :-/ I am looking for help as to where to look. – Nies

If you could add the add the entire snippet that makes up the image above with all the relevant js/html/css it would be a good start, even if the bug is sporadic. Currently we don't have enough to try and re-create the bug and I'm not sure we can point out where to look at the moment. – Hards

@Hards : The "entire snippet" is rather huge. I will try to cull down my part over the next few days, but most of the code is in reveal.js. In the end, I can reproduce a snippet which depends of reveal.js, if that's useful. – Nies

@LawrenceDol Have you tried to style the ol numbers alone in CSS, to check if you get another result? – Spellbind

@DeneaNovac: I can't find a way to style the numbers (or list bullets). Every work-around I've found involves suppressing the list bullets and substituting your own using ::before { content: "..." }. Can you point me in the right direction? – Nies

@LawrenceDol I actually thought that you could substitute your own ol li and maybe it wouldn't be affected by the backgrounds' styling. Here try this: jsfiddle.net/73897e75/10 – Spellbind

@DeneaNovac: That's a possibility, I'll keep in mind. But I'd rather get to the bottom of why and how this is happening. – Nies

@DeneaNovac : I have proven that your work-around will, in principle work. If you'd like to add it as an answer, I'll at least upvote it... but I'll give time and a bounty to find the real underlying cause. – Nies

This looks like a bug in Firefox. Neither Chrome, IE 11, or Edge exhibit this behavior. – Nies

try manually setting the opacity property to 1 through firebug or your DOM inspector. – Gerstein

@Knostradamus : Yep, that's one of the first things I tried... problem is, there's no node/element that represents the list bullets/numbers. Changing the ol and li doesn't have any effect. – Nies

I mean on the container elem. – Gerstein

@Knostradamus : Set opacity:1 on every element from li back up to body; no joy. However this may be related to Firefox bug 1270023, which is caused by bugs in the layering code; I've also seen this bug manifest when my list elements are animated in. – Nies

If you can't do a snippet, can you just link to the live web page that has the problem? – Kerge

Answer 1

Instead of going through the hassle of finding these you could just add custom ones. These you can even style like you want.

body > div.background {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/NASA_Unveils_Celestial_Fireworks_as_Official_Hubble_25th_Anniversary_Image.jpg/800px-NASA_Unveils_Celestial_Fireworks_as_Official_Hubble_25th_Anniversary_Image.jpg) fixed border-box #000 center/cover no-repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
ol {
  list-style-type: none; /* This removes the old numbers */
  padding: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.2);
  width: 300px;
  margin: 60px auto;
}

ol li {
  counter-increment: counter; /* This saves the values to counter */ 
  margin-bottom: 5px;
}
ol li::before {
  content: counter(counter); /* This applies counter to pseudo content */
  margin-right: 10px;
  font-size: 1em;
  color: black;
  font-weight: bold;
}

<div class="background">
  <ol>
    <li>element</li>
    <li>element</li>
    <li>element</li>
  </ol>
<div>

Seppuku

Yeah, I conclude this is, after a lot of research, a bug in Firefox which they appear to be addressing with their usual enthusiasm (which is to say, not quickly). It might, however, be addressed in FF 50 (or perhaps 49) if it's related to the layering bug I referenced (which I think it is). Meanwhile this is a perfectly workable alternative. – Nies

@DeneaNovac : Sorry; I really wanted to give you the bounty on this, since your comment and fiddle gave me a working solution. But can't do that without an answers posted. :-/ – Nies

Answer 2

Consider an ordered list and an un-ordered list like this-

<ol>
    <li> something</li>
    <li> something</li>
</ol>
<ul>
    <li> something</li>
    <li> something</li>
</ul>

To style the list item inside an <ol> tag, you need to use-

ol li{...}

This would style any li tag which is a descendent of ol tag.

But if you want all li items to be of same color(say black),

li{...}

Even this is sufficient, because ultimately, all of them are list items.

With the secondary question being, how could the color of the list numbers be tied to the background in this way?

Since, there is no snippet, it would rather be useless to think of any reasons.

Stokehold