CSS calc with abs and var does not work in chrome, but firefox and safari

Issue

I want to change the opacity (or any other property) of the divs based on "id". It works fine in Safari and Firefox, but does not work in Chrome

div {
  height: 40px;
  width: 40px;
  
  background:orange; 
  
  opacity: calc(1 - abs(var(--id, 1) * 0.25));
}

<div style="--id: -1"></div>
<div style="--id: 0"></div>
<div style="--id: 1"></div>
<div style="--id: 2"></div>

Which one of these is the intended behaviour and what are possible ways to fix this?

Solution

You can easily simulate abs() with max() until better support.

div {
  height: 40px;
  width: 40px;
  
  background:orange; 
  
  --abs: max(var(--id),-1*var(--id));
  
  opacity: calc(1 - var(--abs) * 0.25);
}

<div style="--id: -1"></div>
<div style="--id: 0"></div>
<div style="--id: 1"></div>
<div style="--id: 2"></div>

Answered By - Temani Afif