Lost color on hover transition in Safari 13, is this a bug?

Question

I found that under certain CSS conditions the color of a link will turn transparent on hover (and then remain transparent) in Safari 13 (which is the current version of Safari on older versions of macOS). I guess this is a bug, because it doesn't happen in Safari 14.

This is the combination of CSS rules that triggers this behaviour:

:root {
    --my-color: color(display-p3 1 0 0);
}
* {
    box-sizing: inherit;
}
a {
    transition: all .15s linear;
    color: var(--my-color);
}
a:hover {
    text-decoration: none;
}

The color will change from color(display-p3 1 0 0) to rgba(0, 0, 0, 0) according to the web inspector in Safari 13.

I've created a CodePen and I guess my question is; can someone confirm this behaviour in Safari 13? https://codepen.io/aetles/pen/WNRWeya

Answer 1

No, this is not a bug. Safari has certain limitations with HTML.

Rather than having color: var(--my-color) have color: #COLOR .

Safari is not as good with handling HTML, CSS and Javascript files as google, this may help.

If not, sorry, i have no answer.