Bug 185940 – CSS variables don't work as expected with borders and box shadow.

• Component: CSS
• Status: RESOLVED FIXED

The following CSS doesn't work in Safari.

:root {
  --primary-100: 38, 38, 38;
}

border: 1px solid rgba(var(--primary-100), 1);
box-shadow: 10px 10px 8px 10px rgba(var(--primary-100), 1);

Whereas in any other browser it's working as expected.  

It's worth mention that the following works in Safari: 

border-color: rgba(var(--primary-100), 1);
border: rgba(var(--primary-100), 1) 1px solid;

[Radar WebKit Bug Importer]

<rdar://problem/40583021>

[shrpne]

https://jsfiddle.net/4sLxy763/1/ 
test case of this bug with box-shadow

[Asad]

(In reply to shrpne from comment #2)
> https://jsfiddle.net/4sLxy763/1/ 
> test case of this bug with box-shadow

Workaround: Create a redundant variable first.

    --redundant: rgba(255,0,0, var(--shadow-opacity));
    box-shadow: 0 0 10px var(--redundant);

Any updates on this? All the other browser engines fully support this, except WebKit.

With more and more frameworks moving to CSS vars, shouldn't this feature be fully supported?

Here's another test case:
https://codepen.io/anon/pen/QodMZe

[Casey Jacobson]

For anybody else who has run into this bug, I created a PostCSS plugin to add a workaround:

https://www.npmjs.com/package/postcss-redundant-color-vars

[Kyle Bavender]

Reviewing this in Safari 13.0.3, I am unable to reproduce the error using either  [e-mail]’s example CSS or shrpne’s JS Fiddle. Perhaps this has been fixed?

[shrpne]

Well, looks like it's fixed.
Can't reproduce on Safari 13.0.3 too

[Simon Fraser (smfr)]

Agreed.