CSS variable fallback optimization guide as expected in Safari - Seeking guide
I'm relatively new to this, so bear with me. I'm stuck trying to I'm experiencing an scenario with CSS custom properties (variables) where the fallback values are not being applied correctly in Safari. On Chrome and Firefox, everything renders as expected, but in Safari 15, the fallback value does not seem to take effect when the variable is undefined. Here's a simplified example of my code: ```css :root { --main-color: blue; --fallback-color: red; } .button { background-color: var(--main-color, var(--fallback-color)); color: white; padding: 10px 20px; border: none; border-radius: 5px; } ``` In this case, if `--main-color` is not defined, I expect the button to have a red background (the fallback), but instead, I see a transparent background in Safari. I have tried adding a specific color directly to the `background-color` property as a test, and that works fine, so it seems to be an scenario with the way Safari handles the variable fallback. I also checked if there were any console errors or warnings, but nothing stands out. Any idea why the fallback isn't working in Safari? Is there a known scenario with CSS variables in this version, or am I missing something? Thanks for your help! Could this be a known issue? Any ideas how to fix this?