Bug 221089

Summary: Property background-clip: text; does not work on button elements
Product: WebKit Reporter: brian.gonzalezp <brian.gonzalezp>
Component: FormsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: akeerthi, cdumez, koivisto, simon.fraser, smoley, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 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

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
Expected (Chrome) (48.03 KB, image/png)
2021-01-28 08:43 PST, brian.gonzalezp@gmail.com
no flags
Test Case (501 bytes, text/html)
2021-02-15 17:27 PST, Smoley
no flags
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
Created attachment 420403 [details] Test Case
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.