CSS variables are not resolved in functions nested in calc(), such as transform() or rgba()

RESOLVED DUPLICATE of bug 1308785

Status

()

defect
P3
normal
RESOLVED DUPLICATE of bug 1308785
3 years ago
2 years ago

People

(Reporter: wisniewskit, Unassigned)

Tracking

(Blocks 1 bug)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox52 affected)

Details

(Whiteboard: [webcompat], )

As the developer of this demo says (see URL):

>Firefox does not seem to support var() inside calc().
>When I use var() directly inside the 3D transform functions,
>it works in Firefox, but when there is a calc() in between,
>Firefox doesn’t recognize it.

The CSS in question is (whitespace-formatted a bit for Bugzilla):

>transform:translateZ(calc(var(--translateZ) * 1px))
>          rotateX(calc(var(--rotateX) * 1deg))
>          rotateY(calc(var(--rotateY) * 1deg));
Note that this bug is about var() inside calc() inside a CSS transform function (*multiple levels* of nested CSS functions), and that that var() inside calc() *does* work (https://jsbin.com/ropuqoh/edit?html,css,output). The title of this bug should be updated accordingly.
Thanks, Šime! I've updated the title.
Summary: CSS variables do not seem to work with calc() → CSS variables do not seem to work with calc() inside of a transform function.
probably depend on bug 1308785.
Depends on: 1308785
I’ve found a case with the rgba() function:

  rgba( calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)), 1 );

Live demo: https://blog.hospodarets.com/you-might-not-need-a-css-preprocessor/demos/no-preprocessor-css-colors-from-custom-props/

It looks like this issue is *not* restricted to transform functions; it may be that var inside calc does not work inside *any* CSS function. The title may need to be updated, again :)
Priority: -- → P3
Sure, I've updated the title. Thanks again, Šime.
Summary: CSS variables do not seem to work with calc() inside of a transform function. → CSS variables are not resolved in functions nested in calc(), such as transform() or rgba()
Whiteboard: [webcompat]
Another one https://webcompat.com/issues/4805

   hsla( calc( var(--hue) + 90 ) 50%, 50%, 1 )
This is not related to variables at all... It seems to me calc() itself doesn't work inside any function at all, which is the fundamental issue here... Once calc() works, variables should work directly.
Xidorn, Probably there is a need for a bit of grouping or dependencies.

* Bug 1296209 - Support calc() in CSS properties that take <integer> values
* Bug 984021 - CSS rgb/rgba/hsl/hsla colour syntax does not accept calc() values
Yeah Bug 984021 and this one seems very similar. :)
As with most bugs I'm sure you love +1 on here. But I hit this while creating demo for our custom property work. I've added a label for feature detection. I think it's worth noting that we found a bug in Chrome where they don't support floats inside of calc() so I'd add this testcase for when you do implement this: https://jsfiddle.net/0v82oe3r/

Thanks :)
I filed bug 1360768, but it may be duplicate of this issue.

Also of note, several issues with Firefox's handling of var() in calc() were mentioned in this article: https://css-tricks.com/solving-last-item-problem-circular-distribution-partially-overlapping-items/
Blocks: 1376206
Not resolved with Stylo?
The test case in the bug URL works for me with Stylo enabled. Furthermore, the content in comment 0 (combined with Xidorn's comment 7) appears to be just bug 1308785. I haven't tested rgba(), hsl() etc. but we have bug 984021 for those.
Status: NEW → RESOLVED
Closed: 2 years ago
No longer depends on: 1308785
Resolution: --- → DUPLICATE
Duplicate of bug: 1308785
You need to log in before you can comment on or make changes to this bug.