| Summary: | background-clip:text doesn't work with display:flex | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Marke <marke> | ||||||||
| Component: | CSS | Assignee: | Antti Koivisto <koivisto> | ||||||||
| Status: | RESOLVED FIXED | ||||||||||
| Severity: | Normal | CC: | bfulgham, changseok, clopez, esprehn+autocc, ews-watchlist, ghommey, glenn, info, koivisto, kondapallykalyan, mmaxfield, mnichu, pdr, simon.fraser, webkit-bug-importer, youennf | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 10 | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | Unspecified | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 378080 [details]
Video of the Bug
The described behaviour is still happening for Safari 12.
Text with display:flex and background-clip is not visible.
Firefox and Chrome work as expected
Safari 14 has the same problem too. And I think it will stay that way 🤔 What's the progress on this? Created attachment 454706 [details]
Patch
Created attachment 454711 [details]
Patch
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess Committed r291303 (248442@main): <https://commits.webkit.org/248442@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 454711 [details]. This fix shipped with Safari 15.5 (all platforms). |
When display:flex is enabled, text image mask stops working. <!DOCTYPE html> <html> <head> <style> div { /* display: flex; */ font-size: 80px; color: transparent; background: url(mask.jpg); -webkit-background-clip: text; } </style> </head> <body> <div>Masked</div> </body> </html>