Help with CSS (can't change background color)

Anki Card Design
1

Hello, I’m having a problem with css styling. I have a field whose value is hex code, and I use it to define background color. The card type works fine on windows, but on iOS the background sticks to black (I use dark mode on both device).
Below is my css:

.bg{
	position: fixed;
 top: 0px; bottom: 0px; left: 0px; right: 0px;
height: calc(100vh-130px);//prevent scroll bar
 background-color: var(--bg-color);
	animation: fadeIn var(--time) forwards ease;
 z-index: -1;
}

@keyframes fadeIn{
from {background-color: transparent;}
to {background-color: var(--bg-color);}
}

On the card I use javascript to assign value to --bg-color:

var colorDiv = document.getElementById("color"); // I put the hex code field in a div id'ed color
var backgroundDiv=document.getElementById("bg"); // I wrap entire card in this div

var hexCode = colorDiv.innerHTML; // I get the hex code from the field
backgroundDiv.style.setProperty ('--bg-color',hexCode); // I set --bg-color to this code

Some test I did so far:
In .bg, I temporarily set background-color to red and deleted the animation, the background is still black.
In .card, I temporarily set background-color to blue and the background is still black.
I also checked that on mobile, --bg-color has correct value; Similar animation were applied to other class and they worked, so animation should be fine.

I don’t know how to fix this. Thanks in advance for any help.

2

Maybe the issue is that “bg” is implied to be a class in css, but is used as an Id in js?
Depending on what is actually written in your html, you should either use #bg selector instead of .bg in css, or select it using backgroundDiv = document.getElementsByClassName("bg")[0]; in js.

Also, just as a suggestion, you can use the shortcut inset: 0; instead of the long top: 0px; bottom: 0px; left: 0px; right: 0px;. You can probably also use overflow-y: hidden; instead of manually calculating height, if you want to make your content not scrollable.

3

Thank you for your advice.

I changed the id name but it doesn’t work. I also tried to use the second method you mentioned but the result doesn’t change.
I have other id with the same name as a css class but they actually worked, so I’m very confused now.

Also thank you for your other suggestions!

4

Maybe you have some names set as Id for one element and as a class for another? It’s hard to tell without looking at the html source. Can you provide the relevant part? Preferably for both cases, where what you are trying to do worked and where it didn’t.

5

Please find below my entire html and javascript:

<div id="background" class="bg"> //that's the part gone awry
<div id="name" class="name"><br><b>{{Name}}</b></div> //this div works just fine, which confuses me.

{{#Read}}<div class="read">{{Read}}</div>{{/Read}}
{{^Read}}<div class="read">{{Name}}</div>{{/Read}}

<div id="color" style="display:none">{{Hex}}</div>
</div>

<script>
var colorDiv = document.getElementById("color");
var nameDiv= document.getElementById("name");
//var backgroundDiv=document.getElementById("background"); //that's the code I used
var backgroundDiv = document.getElementsByClassName("bg")[0];

var hexCode = colorDiv.innerHTML; // get the color code
var inverseColor = calculateInverseColor(hexCode);
console.log(inverseColor);

//document.documentElement.style.setProperty("--bg-color", hexCode);
//document.documentElement.style.setProperty("--text-color", inverseColor);
backgroundDiv.style.setProperty ('--bg-color',hexCode);
nameDiv.style.setProperty ('--text-color', inverseColor);


function calculateInverseColor(hexColor) {
  hexColor = hexColor.replace("#", "");

  var r = parseInt(hexColor.substr(0, 2), 16);
  var g = parseInt(hexColor.substr(2, 2), 16);
  var b = parseInt(hexColor.substr(4, 2), 16);

  var inverseR = 255 - r;
  var inverseG = 255 - g;
  var inverseB = 255 - b;

  var inverseHexColor = "#" + componentToHex(inverseR) + componentToHex(inverseG) + componentToHex(inverseB);

  return inverseHexColor;
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

</script>

Below is my css for the class “name”:

.name{
	position: fixed;
	right:5%;
	top:10%;
	z-index:2;
	animation: namefadeIn var(--time) forwards ease;
	color: var(--text-color);
}
.mobile .name{
 color: var(--bg-color);
}
.nightMode .name{
	animation: darkNamefadeIn var(--time) forwards ease;
}
@keyframes darkNamefadeIn{
from {color: white;}
to {color: var(--text-color);}
}

@keyframes namefadeIn{
from {color: black;}
to {color: var(--text-color);}

}

P.S. I tried to set “name” class’s background to hexCode, it worked at first, but then as I expand the div to entire screen the color disappeared and it never come back.

Thank you again for your time and patience.

6

Try deleting the comment after ‘;’ in this line:

Double slash is not a proper way to comment things in css (/* and */ should be used to mark the start and end of commented section instead).
Some browsers still handle this case by interpreting everything that comes after semicolon and before linebreak as a separate rule, which is then simply ignored because it does not correspond to any existing css properties. On other browsers, however, it is grouped with everything up until the following semicolon, thus invalidating the rule defined on the next line, which is ‘background-color’ in your case.
I don’t have any iOS devices, so I can’t test it. But the effect of this really lines up with the behavior you are describing

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.