CSS: “left”: Character n is neither a decimal digit number, decimal point, nor "e" notation exponential mark.

A calc() expression in the left property contains a word starting with "n", such as none or NaN, where a number or a length should be.

Inside calc() and the other math functions (min(), max(), clamp()), each operand must be a number, a length, a percentage, or a var() reference. When the validator finds a word instead, it tries to read it as a number and reports the word's first letter. calc(50% - none) reports "Character n", and calc(50% - NaNpx) reports "Character N". Words starting with other letters give the same message with that letter, such as "Character a" for auto.

NaN usually comes from a script or template that computes the position. If the calculation divides by zero or reads a value that isn't a number, calc(50% - {{ offset }}px) comes out as calc(50% - NaNpx). Keywords such as none or auto are valid on their own (left: auto) but not as operands of calc(). Browsers ignore the whole declaration, so the element gets the left value it would have without it.

To fix it, put a length in place of the word, or make sure the template variable always holds a number. If the value comes from a custom property, var() is fine inside calc(), and a fallback covers the case where the property isn't set: calc(50% - var(--offset, 0px)).

Outside calc(), other mistakes in left give different messages: left: 10 says only 0 can be written without a unit, and left: NaNpx says the value is not a left value.

Invalid example

<div class="tooltip" style="position: absolute; left: calc(50% - NaNpx);">Copied</div>

Valid example

<div class="tooltip" style="position: absolute; left: calc(50% - 120px);">Copied</div>

Learn more:

MDN Reference

MDN Web Docs: left

→

MDN Reference

MDN Web Docs: calc()

→