CSS Variables implementation guide on Hover in Safari 16.2 - advanced patterns
I'm stuck on something that should probably be simple. I keep running into I'm reviewing some code and I'm currently experiencing an scenario where CSS variables defined in a `:root` selector are not updating as expected on hover, specifically in Safari 16.2. I have the following code structure: ```css :root { --primary-color: #3498db; --hover-color: #2980b9; } .button { background-color: var(--primary-color); transition: background-color 0.3s ease; } .button:hover { background-color: var(--hover-color); } ``` While this works perfectly fine in Chrome and Firefox, in Safari, the button does not change its background color on hover. I've tried forcing a reflow by adding `display: inline-block;` to the button class, but that didn't solve the scenario. Here's the HTML I'm using: ```html <button class="button">Hover me!</button> ``` I've also checked for any potential CSS specificity issues or conflicts with other styles, but everything seems fine. I verified that there's no caching question by clearing the browser cache. Is there a known bug or workaround for using CSS variables in hover states with Safari? Any insights would be greatly appreciated. Thanks! I'm developing on Linux with Css. I'd really appreciate any guidance on this. How would you solve this? I'm developing on Debian with Css.