I’m working with the following code:

And I’m testing two expressions:

Test Case 1

calc(30px / 720px * 100vw)

Test Case 2

calc(var(--w) / 720px * 100vw)

Logically, both expressions should produce the same result since --w is set to 30px.

However, the results differ depending on the browser:

• Chrome, Edge, Opera: Correctly compute both expressions.

• Samsung Internet (mobile) and Firefox (desktop): Fail to evaluate the second expression and instead treat it as 100%, as if the calculation cannot be resolved.

I suspect—but cannot confirm—that this issue may be related to limited support for what MDN refers to as “typed arithmetic,” where dividing typed values produces a unitless number (reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc).
This is only a hypothesis and not a reliable explanation, but it’s one possible guess as to why these browsers behave differently when the calculation includes a CSS variable.

Still, both expressions should theoretically compute to the same value, so the inconsistent behavior across browsers is quite confusing.

How can this issue be resolved?

If the problem is due to a parsing or compatibility limitation in Samsung Internet or Firefox, I would appreciate any reliable workarounds.

Preview

I created a test page to compare how Chrome and Firefox handle three different cases of calc() and CSS variables:
https://codepen.io/wyqfxyfl-the-bashful/pen/KwzGqvW

Below is the behavior of each case in both browsers.

I cannot simply use:

--w: 30;

because some variables may contain color values, strings, or other non-length values.

Is there a reliable and safe way to make calc() with CSS variables behave consistently across Chrome, Firefox, and Samsung Internet, without using the Case 3 workaround?

(And just to clarify: Case 3 is not the approach I want.)