About This CSS Issue
A math function in the inset-inline-start value, such as calc(), min(), max() or clamp(), combines values whose types can't be mixed, like a length and a unitless number.
inset-inline-start sets how far a positioned element sits from the start edge of its containing block in the inline direction. In left-to-right text that is the left edge, and in right-to-left text it is the right edge. The property takes a length such as 12px or 1rem, a percentage, or auto, so any math function inside it has to produce a length or a percentage too.
When calc() adds or subtracts, both sides must have the same type. calc(1rem + 2px) adds two lengths, but calc(1rem + 2) tries to add a plain number to a length, and the result has no type the browser can use. The arguments of min(), max() and clamp() follow the same rule, so min(10px, 5) can't compare a length with a number. Mixing in another type, as in calc(10deg + 2px), triggers the same error.
The usual cause is a number that lost its unit, often after a hand edit or a preprocessor variable that was declared without one. Multiplication and division work differently: one side may be a plain number that scales the other, so calc(4 * 1rem + 2px) is valid.
Browsers ignore a declaration with a mistyped expression. The element keeps the inset-inline-start it got from earlier rules, usually auto, and ends up in the wrong place.
Invalid example
<div style="position: absolute; inset-inline-start: calc(1rem + 2);">Badge</div>
<div style="position: absolute; inset-inline-start: min(10px, 5);">Tooltip</div>
Valid example
<div style="position: absolute; inset-inline-start: calc(1rem + 2px);">Badge</div>
<div style="position: absolute; inset-inline-start: min(10px, 5vw);">Tooltip</div>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.