Incorrect vh calculations

[justinpombrio]

The following calculation:

100vh - 50px

is done incorrectly. On my laptop (Macbook with retina display; chrome), it comes out to 300px when it should be 550px.

In more detail, here's a table of the size written in less, and the actual size as reported by Chrome's inspector (which matches what I see):

Specified Size   Actual Size
100vh            600px
100vh-50px       300px
100vh-10px       540px
300px            300px

(I rounded some numbers slightly.)

[matthew-dean]

There's not enough information here. What is your input .less, and what is your .css output vs. your expected output? Also, include your Less version. Is this written in a calc()? What is the context for this expression?

[justinpombrio]

Input:

.aclass {
  height: 100vh - 50px;
}

Output:

.aclass {
  height: 50vh;
}

Expected output: either css that does this computation, or an error if no such css exists.

Less does the same thing when the context of the expression is the definition of a variable (e.g. @height: 100vh - 50px;), which was the context I originally encountered it in. Splitting the computation across multiple variables or adding parentheses does not help.

Both versions 3.0.1 and 1.6.3.

[matthew-dean]

@justinpombrio

You may be confused. First, there's not any such valid CSS value as height: 100vh - 50px;, so trying to produce that as output won't get you anywhere. What you want is: height: calc(100vh - 5px);. As of Less 3.5, operations in calc() are not touched.

As far as elsewhere, the operation as you reported it is working as designed. How math is treated in Less could always be improved. (See: #1880) But it's currently working as expected. That is, in general, Less ignores units in expressions, with the exception being calc() or using strictUnits: true.