Broken CSS custom properties inside pseudo-classes in Safari

I discovered a peculiar bug involving CSS custom properties, the :visited pseudo-class and the Safari browser on macOS.

A stripped down example of the problematic CSS is represented below:

a {
  --color-link-text: blue;
  --color-link-visited-text: orange;
}

a:link {
  color: var(--color-link-text);
}

a:visited {
  color: var(--color-link-visited-text);
}

In most browsers this would mean all unvisited links would be coloured blue, with all visited links being coloured orange, but in Safari on macOS all unvisited links would be orange, and visited links would strangely reset to black, regardless of any color definitions elsewhere on the page.

Further to that, toggling certain CSS custom properties and properties on and off resulted in unpredictable behaviour, which made it difficult for me to initially diagnose the problem.

The fix is to not define the CSS custom properties for the :visited pseudo-class on the a element itself. Defining them on the :root or html selectors are both good alternatives.

This would result in the following CSS:

:root {
  --color-link-text: blue;
  --color-link-visited-text: orange;
}

a:link {
  color: var(--color-link-text);
}

a:visited {
  color: var(--color-link-visited-text);
}