Почему calc не правильно определяет ширину экрана?

Question

[2ristBY]

Есть такая формула calc(5px + (15 - 5) * ((100vw - 320px) / (940 - 320))), которая применяется при ширине экрана меньше 940px и итоговое значение должно изменяться от 15 до 5. При уменьшении ширины экрана меньше 940px значение становится 1.45161px. Если вместо 100vw в формулу подставить значение ширины экрана - считает правильно. В чем косяк?
UPD
Если поставить значение в vw вне calc, то работает корректно.
https://jsfiddle.net/x7hrjud1/
UPD
Использую Less.

Comments

[Ankhena]

Сделайте песочницу на jsfiddle.net с воспроизводимой проблемой

[Aetae]

Не вижу проблемы:
https://jsfiddle.net/xh7mj3b0/2/

[2ristBY]

Aetae, Ankhena, понял в чем проблема - calk() записан был в файле препроцессора Less, и в CSS уже передавал конкретное число и оно не менялось от ширины экрана, просто подставлялось в padding при разрешении менее 940px через медиа-запрос.
Тогда другой вопрос: как правильно записать эту формулу в LESS?

[Aetae]

2ristBY, обновить LESS.

Answer 1

[2ristBY]

Понял в чем проблема - препроцессор Less проводил вычисления в calk() и в CSS передавал конкретное число и оно не менялось от ширины экрана, просто подставлялось в padding при разрешении менее 940px через медиа-запрос.
Решилось экранированием выражения в Less.

Всем спасибо.

Answer 2

[Андрей Ежгуров]

Зачем так сложно? Если сократить все промежуточные вычисления, то останется:
calc((100vw - 10px) / 62)
и у меня такое выражение нормально отрабатывает.

P.S. А браузер, в котором тестируется код, vw поддерживает?

Comments

[2ristBY]

Сложно потому что формула универсальная, в которой меняются значения в зависимости от ситуации.
Браузер Chrome Версия 87.0.4280.88 (Официальная сборка), (64 бит).
UPD
В Опере такая же ситуация.
Если сокращать формулу, то получится calc(5px + (100vw - 320px) / 62) - тоже не работает.
И ваша формула дает такой же результат (1.45161px).

[Aetae]

2ristBY, сейчас все браузеры хром кроме файерфокса. Баги, соответственно, у них одинаковые. Тебе в багтреккер хрома.

[2ristBY]

Aetae, это не баг хрома - calk() записан был в файле препроцессора Less. Остальное описал выше.