Bug 221089

Summary:

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

Product:

WebKit

Reporter:

brian.gonzalezp <brian.gonzalezp>

Component:

Forms

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

akeerthi, cdumez, koivisto, simon.fraser, smoley, webkit-bug-importer, wenson_hsieh, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

All

OS:

All

Attachments:

Description	Flags
Issue as seen on Safari 14	none
Expected (Chrome)	none
Test Case	none

Description brian.gonzalezp@gmail.com 2021-01-28 08:41:27 PST

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.

Comment 1 brian.gonzalezp@gmail.com 2021-01-28 08:43:21 PST

Created attachment 418647 [details]
Expected (Chrome)

Comment 2 Radar WebKit Bug Importer 2021-02-04 08:42:12 PST

<rdar://problem/73982665>

Comment 3 Smoley 2021-02-15 17:27:23 PST

Created attachment 420403 [details]
Test Case

Comment 4 Smoley 2021-02-15 17:30:09 PST

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