0

Neither of the following gradients are loaded in Safari 13.0.5:

background-image: radial-gradient(var(--sdc-color-primary-dark), var(--sdc-color-primary-light), transparent);
background: radial-gradient(var(--sdc-color-primary-dark), var(--sdc-color-primary-light), transparent);
background-color: radial-gradient(var(--sdc-color-primary-dark), var(--sdc-color-primary-light), transparent);

It's the fact that I am using variables, but I looked on the internet and I found that variables should be supported from an earlier version. Any ideeas?

adi
  • 417
  • 4
  • 25
  • The accepted answer to [CSS native variables not working in media queries](https://stackoverflow.com/q/40722882/215552) applies here as well; variables can be used to replace entire property values, not just parts of values. – Heretic Monkey Feb 07 '20 at 18:31
  • 1
    Works just fine for me in Safari 13.0.5: https://jsfiddle.net/chriskirknielsen/5rew9xpo/ Also note that `background-color` doesn't accept gradients as a value. – chriskirknielsen Feb 07 '20 at 18:32
  • It seems I was mistaken, it isn't that the variables are not working, they are not working if they are set in another css file. – adi Feb 08 '20 at 06:47

1 Answers1

0

Had the same issue as OP and found the answer here: :root variables not available on :before element

It's likely that the OP's css was referring to a :before or :after pseudo-element, which don't have access to the :root (or any other) namespace by default. Adding the :before and :after namespaces to my variable definitions fixed it. E.g.:

:root, :before, :after {
  --example-var: red;
}
Josh Duncan
  • 1
  • 1