0

I have the following css on a series of elements.

#foo-parent {
    --rotation: 45deg;
}

@media (max-width: 1680px) {
    .foo {
      --multiplier: 8.33;
    }
}

/* a number of other nearly identical media queries defining different values for --multiplier */

.foo {
    transform: scale(calc(var(--multiplier) / 25)) rotate(calc(0deg - var(--rotation)))!important;
}

The rotation transform is working fine, but the scaling isn't kicking in. If I change it to 

transform: scale(.222) rotate(calc(0deg - var(--rotation)))!important;

...it works.

Edit: from further testing, if I take out either half, each one works separately:

transform: scale(calc(var(--multiplier) / 25))!important;
transform: rotate(calc(0deg - var(--rotation)))!important;

It's only failing when both css variable bits are present:

transform: scale(calc(var(--multiplier) / 25)) rotate(calc(0deg - var(--rotation)))!important;

So, is there a limit that only css variable can be used, or is there something else I'm missing?

BrianFreud
  • 7,094
  • 6
  • 33
  • 50
  • testing both separately they don't work for me. please provide a fiddle with html markup. – dippas Sep 24 '16 at 01:26
  • Well, it's working in the fiddle when abstracted; I'll have to play around and see what else might be causing things to fail. In any case: https://jsfiddle.net/hq24yt9w/ – BrianFreud Sep 24 '16 at 02:07
  • For me it works both ways, separated and not. What browser(and version) are you using? – pol Sep 24 '16 at 02:13
  • Managed to find the problem. When #foo-parent had the class giving a value of 45deg to --rotation, the transform worked. I'd neglected to give the parent a default value of 0deg for --rotation, however, so when the 45deg class wasn't on, that (null) rotation *appeared* to be working, but was actually (0deg - undefined), invalidating the entire transform, including the scale half. – BrianFreud Sep 24 '16 at 06:15

1 Answers1

0

It's a bit difficult to help you with missing parts of the code here, because with this first view it should work.

But on your side, several things you can check to debug this case:

  • Are you sure the two variables are always defined. If they are not, all the transform value will be affected.
  • Is there a cycle in the attribution of the value, you can't define a variable using itself in the value, e.i. --size: calc(var(--size) + 50px);
  • Check if at some moment the value become invalid. It shouldn't happen easily because almost all values are valid, but the way they are used can trigger a new kind of error invalid at computed time meaning that the value of the computed variable doesn't make sense in that specific context. (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Validity_and_values)

I hope this little list can help :)

PS. you can use fallback in some cases: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Custom_property_fallback_values

Geoffrey C.
  • 198
  • 6