CSS Variables unexpectedly resulting in 0

Question

I'm working on a HTML/CSS-only (i.e. no JS) project which is an example of CSS Variable computing, but I seem to have hit an impasse as once I introduce a new calculation for a new CSS variable, the values for that section revert to 0 in the counters.

Let me explain with my CodePen at: https://codepen.io/eliseodannunzio/pen/ZEyGvOy

I have 4 dropdowns currently set to specific values, in this case June 1976. A series of calculations take place using 8-bit registers which creates a flow-on effect to the next set of registers and so on. The registers labeled --p5R0 to --p5R5 are for the step where I'm adding a value of 0 (based off the Century dropdown (1900's = 0 in this case)). The value of the six registers --p5R0 (LSB) to --p5R5 (MSB) result in a value of 11001 (25), which is what is expected in this case...

Now I've worked out the calculations for my next step which in this case is adding 76 (01001100), which has been worked out in Registers --y7 (MSB) to --y0 (LSB); and as a result I'm expecting the Registers --p6R7 (MSB) to --p6R0 to display 101 (25 + 76) within my debug window, in the form of 01100101.

For some reason, only the first 3 bits seem to be calculable (Bits 0, 1 and 2), currently displaying 88888101 (The 8's are displaying as --p6R3 to --p6R7 are commented out and the counters are picking up on that, which shows that's working). As soon as the value of --p6R3 (Bit 3) is encountered, all the counters seem to revert to 0 for some reason. I've set up the counters to have a default value of 8 should their respective CSS variables not be available, more or less acting as an aid to debugging.

The code in question is towards the end, search for /** ISSUE **/ to locate it, but I've replicated it below...

--p6R0: calc((1 - 2 * var(--y0, 0)) * var(--p5R0, 0) + var(--y0, 0));
--p6K1: calc(var(--p5R0, 0) * var(--y0, 0));
--p6R1: calc((1 - 2 * var(--y1, 0)) * (var(--p6K1, 0) * (1 - 2 * var(--p5R1, 0)) + var(--p5R1, 0)) + var(--y1, 0));
--p6K2: calc(var(--p6K1, 0) * (var(--p5R1, 0) * (1 - 2 * var(--y1, 0)) + var(--y1, 0)) + var(--p5R1, 0) * var(--y1, 0));
--p6R2: calc((1 - 2 * var(--y2, 0)) * (var(--p6K2, 0) * (1 - 2 * var(--p5R2, 0)) + var(--p5R2, 0)) + var(--y2, 0));
--p6K3: calc(var(--p6K2, 0) * (var(--p5R2, 0) * (1 - 2 * var(--y2, 0)) + var(--y2, 0)) + var(--p5R2, 0) * var(--y2, 0));
/* These values below seem to fail and revert the p6Rx series to zero... why???? */
/* --p6R3: calc((1 - 2 * var(--y3, 0)) * (var(--p6K3, 0) * (1 - 2 * var(--p5R3, 0)) + var(--p5R3, 0)) + var(--y3, 0)); */
/* --p6K4: calc(var(--p6K3, 0) * (var(--p5R3, 0) * (1 - 2 * var(--y3, 0)) + var(--y3, 0)) + var(--p5R3, 0) * var(--y3, 0)); */
/* --p6R4: calc((1 - 2 * var(--y4, 0)) * (var(--p6K4, 0) * (1 - 2 * var(--p5R4, 0)) + var(--p5R4, 0)) + var(--y4, 0)); */
/* --p6K5: calc(var(--p6K4, 0) * (var(--p5R4, 0) * (1 - 2 * var(--y4, 0)) + var(--y4, 0)) + var(--p5R4, 0) * var(--y4, 0)); */
/* --p6R5: calc((1 - 2 * var(--y5, 0)) * (var(--p6K5, 0) * (1 - 2 * var(--p5R5, 0)) + var(--p5R5, 0)) + var(--y5, 0)); */
/* --p6K6: calc(var(--p6K5, 0) * (var(--p5R5, 0) * (1 - 2 * var(--y5, 0)) + var(--y5, 0)) + var(--p5R5, 0) * var(--y5, 0)); */
/* --p6R6: calc((1 - 2 * var(--y6, 0)) * var(--p6K6, 0) + var(--y6, 0)); */
/* --p6R7: calc(var(--p6K6, 0) * var(--y6, 0)); */

The display for these values is done further below in the following code:

#addyear-display:after {
  counter-reset: R60 var(--p6R0, 8) R61 var(--p6R1, 8) R62 var(--p6R2, 8) R63 var(--p6R3, 8) R64 var(--p6R4, 8) R65 var(--p6R5, 8) R66 var(--p6R6, 8) R67 var(--p6R7, 8);
  content: "p6R7:" counter(R67) " p6R6:" counter(R66) " p6R5:" counter(R65) " p6R4:" counter(R64) " p6R3:" counter(R63) " p6R2:" counter(R62) " p6R1:" counter(R61) " p6R0:" counter(R60);
  position: absolute;
  top: 4rem;
  left: 0;
}

The moment the code block for --p6R3 to --p6R7 is uncommented, those 8's should disappear and display 1's and 0's that represent 101, but that's not happening, it's coming up all zeroes, which I know is wrong... I've been looking for an explanation for why these CSS variables are failing, but have come up empty.

My questions are:

a) Are my CSS calculations invalid? b) Is there a limit for the number of CSS var() calls or calc() calls on a given stylesheet before things fall flat? c) Is there a reason why my CSS variables aren't rendering correctly in the counter display in the debug window once the commented code block is uncommented? d) is there a way to resolve this issue?

Thanks in advance

user_16946324 · Answer

Your calculations are valid. What you may not realize is that variables do not evaluate calc(*) on their own. All the nested calculations are evaluated when they're used inside an actual property. So most of your variables store formulas which are supposed to make sense only inside the context of a DOM node they're used in (remember, calc also operates with % and em). And they get progressively larger. Here's what chrome inspector shows for --p6R7:

Doesn't look too bad... it's truncated. Using getComputedStyle($("#addyear-display")).getPropertyValue('--p6R7') returns an empty string. And doing the same for --p6R3 - 113kB of calcs, 0s and 1s.

As far as I'm aware, there's no actual limit to the length of property values in CSS. I've run some tests, and there appears to be a limit for nesting calcs in a single formula in chrome (100 calcs). counter-reset resolves to none the moment you uncomment --p6R3. The variables are not reset to 0, the counter is. Firefox, on the other hand, crashes the page seemingly randomly, but most of the time it endures uncommenting the entire block.

Possible solutions:

Use firefox
Optimize the algorithm

CSS Variables unexpectedly resulting in 0

1 Answers