csssafaribox-shadowcss-variables

CSS custom properties in box-shadow color function render incorrectly in Safari

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

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

Or run 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>

In Safari the box-shadow renders as black (it should be red) with no alpha. This does work if you don't use rgba (see commented out box-shadow line).

Oddly Safari inspect element recognizes the CSS call and is able to identify the CSS custom property value:

Safari Inspect Element

Even stranger is that if you set the color (text color) property of the item to the custom property the box-shadow inherits it and it works (sadly in my actual implementation I need multiple box-shadows so this doesn't fix my issue).

Solution

  • I have got a solution to your problem, if you simply add variable color in box shadow then it won't work in Safari browser. However by doing some manipulation in code, you can do it easily.

    Here are few steps to do..

    1. Select any root color in RGB value. 

      :root {
     --color: 130, 16, 253;
 }

    2. Add same color but with some opacity to root for box shadow. Here is a trick you are using one variable in another --shadowColor variable.

      :root {
    --color: 130, 16, 253;
    --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
}

    3. Apply color and box shadow to any object. 

      .feature_box
{   
    color: rgba(var(--color), 1);
    -webkit-box-shadow: var(--shadowColor);
    box-shadow: var(--shadowColor);
}

      Enjoy:)