CSS Calc() отличается в Samsung/Firefox и Chrome/Edge ⇐ CSS

[Anonymous]

Я работаю со следующим кодом:

Код: Выделить всё

И я тестирую два выражения:
Тестовый пример 1

Код: Выделить всё

calc(30px / 720px * 100vw)

Тестовый пример 2

Код: Выделить всё

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

По логике, оба выражения должны давать один и тот же результат, поскольку --w установлено в 30 пикселей.
Однако результаты различаются в зависимости от браузера:

• Chrome, Edge, Opera: правильно вычислить оба выражения.
• Samsung Internet (мобильный) и Firefox (настольный компьютер): не удается вычислить второе выражение и вместо этого рассматривать его как 100 %, как будто вычисление не может быть разрешено.

Я подозреваю — но не могу подтвердить — что эта проблема может быть связана с ограниченной поддержкой того, что MDN называет «типизированной арифметикой», когда деление типизированных значений дает безразмерное число (ссылка:

https://developer.mozilla.org/en-US/doc ... alues/calc).

Это всего лишь гипотеза и ненадежное объяснение, но это одно из возможных предположений о том, почему эти браузеры ведут себя по-разному, когда в расчет входит переменная CSS.
Тем не менее, оба выражения теоретически должны вычислять одно и то же значение, поэтому поведение в разных браузерах может быть неодинаковым. довольно запутанно.
Как можно решить эту проблему?
Если проблема связана с ограничениями синтаксического анализа или совместимости в Samsung Internet или Firefox, я был бы признателен за любые надежные обходные пути.
Предварительный просмотр
Я создал тестовую страницу, чтобы сравнить, как Chrome и Firefox обрабатывают три разных случая Calc() и переменных CSS:

https://codepen.io/wyqfxyfl-the-bashful/pen/KwzGqvW
Ниже показано поведение каждого случая в обоих браузерах.
Я не могу просто использовать:
--w: 30;
потому что некоторые переменные могут содержать значения цвета, строки или другие значения, отличные от длины.
Есть ли надежный и безопасный способ заставить Calc() с переменными CSS работать одинаково в Chrome, Firefox и Samsung в Интернете, не используя обходной путь варианта 3?
(И просто хочу уточнить: вариант 3 — это не тот подход, который мне нужен.)>

Подробнее здесь: https://stackoverflow.com/questions/798 ... hrome-edge