0

I create pen with example of something like bug: https://codepen.io/dimakrutoo/pen/PoGZymb

if we change the value --layoutWMin of the variable from "0px" to "0" then the calculations break

Can anyone please explain why the clamp() function doesn't work with a zero value without units?

UPD

Some more illustrative example here: https://codepen.io/dimakrutoo/pen/RwGarWY

krutoo
  • 195
  • 13

1 Answers1

0

This isn't a full answer but I ran out of characters in comments.

I can't explain it but just to note that clamp resolves to max(MIN, min(VAL, MAX)) see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() and max and min demonstrate the same behaviour when the first parameter is 0 and the second has a unit.

There are several questions on SO with masses of accepted and upvoted answers which appear now to be incorrect as they firmly state that 0 and, say, 0px are the same (as does the spec as far as I can see).

It may be a bug, it may be a feature, but it's important to know. Thanks for highlighting it.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • 1
    here is a more accurate answer with better explanation: https://stackoverflow.com/a/62523544/8620333 – Temani Afif Dec 05 '20 at 10:52
  • That’s great, thanks. Mine wasn’t an answer as I said, but an overlong comment. – A Haworth Dec 05 '20 at 10:55
  • @TemaniAfif Thank you a lot, but how can i use css-variables (with "0" value) in max/min/clamp? This is pretty implicit behavior... – krutoo Dec 05 '20 at 11:17
  • 1
    @dima.krutoo multiply it with a unit when you need to use it `var(--p)*1px` [where `--p:0`]. Related: https://stackoverflow.com/q/57666183/8620333 – Temani Afif Dec 05 '20 at 11:18
  • @TemaniAfif looks very strange from the outside, especially when the variable is provided by someone else - there is no certainty about its value, but thank you again – krutoo Dec 05 '20 at 11:20
  • @dima.krutoo then that *someone else* should understand the rules and avoid the use of uniteless value. You won't have the flexibility of a programming language with CSS variables. – Temani Afif Dec 05 '20 at 11:37