Custom CSS properties in box-shadow color function do not display correctly in Safari

Question

Is this a Safari bug or am I doing something wrong?

Check this code in Safari and Chrome and Firefox: https://codepen.io/mattaningram/pen/zWVxzR

Or follow the code snippet below:

.item {
  --itemColor: 200, 0, 0;
  --itemColorHex: #C80000;
  
  width: 50vw;
  height: 50vh;
  
  background-color: rgba( var(--itemColor), 1 );
  
  -webkit-box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
  box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
  /* box-shadow: 0 0 15px 10px var(--itemColorHex); THIS WORKS */
  /* color: rgba( var(--itemColor), .5 ); BOX-SHADOW INHERITS THIS PROPERLY IF UNCOMMENTED */
}

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="item"></div>
</div>

Run code

In Safari, the shadow box appears as black (it should be red) without alpha. This works if you are not using rgba(see Commented line box-shadow).

The Oddly Safari element validates a CSS call and is able to identify the value of a custom CSS property:

, color (text color) , , ( , , 't ).

Answer 1

"-webkit-box-shadow".

. https://css-tricks.com/almanac/properties/b/box-shadow/