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:

brian.gonzalezp@gmail.com

Reported 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.

Attachments
Issue as seen on Safari 14 (27.78 KB, image/png) 2021-01-28 08:41 PST, brian.gonzalezp@gmail.com	no flags	Details
Expected (Chrome) (48.03 KB, image/png) 2021-01-28 08:43 PST, brian.gonzalezp@gmail.com	no flags	Details
Test Case (501 bytes, text/html) 2021-02-15 17:27 PST, Smoley	no flags	Details
View All Add attachment proposed patch, testcase, etc.

brian.gonzalezp@gmail.com

Comment 1 2021-01-28 08:43:21 PST

Created attachment 418647 [details] Expected (Chrome)

Radar WebKit Bug Importer

Comment 2 2021-02-04 08:42:12 PST

Smoley

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

Smoley

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

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

Note You need to log in before you can comment on or make changes to this bug.