Property background-clip: text; does not work on button elements

[[e-mail]]

Created attachment 418646 [details]
Issue as seen on Safari 14

* Given the HTML:

<a>This is an anchor</a>

<br />

<button>This is a button</button>

* And the CSS:


button, a {
  font-size: 5rem;

  display: inline-block;
  color: transparent;

  background-image: url('https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80');
  background-size: 100% 100%;

/*   Problematic on Safari: */
  -webkit-background-clip: text;
}

Webkit does not seem to respect the background-clip: text; property, when applied to a button tag.

This does not seem to be an issue on other major browsers.

[[e-mail]]

Created attachment 418647 [details]
Expected (Chrome)

[Radar WebKit Bug Importer]

<rdar://problem/73982665>

[Smoley]

Created attachment 420403 [details]
Test Case

[Smoley]

Thanks for filing, I'm reproducing this on Safari 13.1.3 as well as TOT.