WebKit bug? `background-clip:var(--a)` invalidates `-webkit-background-clip:text` for Safari/Chrome

dabblet.css

/*
 * WebKit bug? `background-clip:var(--a)` invalidates `-webkit-background-clip:text` for Safari/Chrome
 * Works in Firefox
 */

p {
	background: linear-gradient(to right, red, blue);
	color: rgba(0,0,0,0.3);
	font: bold 400% sans-serif;
	padding: .5em;
/*	This works fine in all browsers: the gradient appears only through the clipped text */
	-webkit-background-clip: text;
	background-clip: text;
}

p + p {
/*	The following—which should be equivalent—doesn't work in Safari/Chrome, but works in Firefox */
	--a: text; 
	-webkit-background-clip: text;
	background-clip: var(--a);
}

dabblet.html

<p>background-clip: text;
<p>background-clip: var(--a);

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}