Bug 169125 - background-clip:text doesn't work with display:flex
Summary: background-clip:text doesn't work with display:flex
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antti Koivisto
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-03-03 02:32 PST by Marke
Modified: 2022-05-26 14:51 PDT (History)
16 users (show)

See Also:

Attachments
Video of the Bug (473.46 KB, video/mp4)
2019-09-05 07:13 PDT, Jan Nicklas 		no flags Details
Patch (1.89 KB, patch)
2022-03-15 07:43 PDT, Antti Koivisto 		no flags Details | Formatted Diff | Diff
Patch (5.43 KB, patch)
2022-03-15 08:49 PDT, Antti Koivisto 		no flags Details | Formatted Diff | Diff
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Marke 2017-03-03 02:32:05 PST 
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>
Comment 1 Jan Nicklas 2019-09-05 07:13:04 PDT 
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
Comment 2 Mike 2020-12-17 00:42:26 PST 
Safari 14 has the same problem too. And I think it will stay that way 🤔
Comment 3 Radar WebKit Bug Importer 2020-12-17 10:54:37 PST 
<rdar://problem/72432683>
Comment 4 Frank Topel 2021-12-02 08:34:00 PST 
What's the progress on this?
Comment 5 Antti Koivisto 2022-03-15 07:43:32 PDT 
Created attachment 454706 [details]
Patch
Comment 6 Antti Koivisto 2022-03-15 08:49:56 PDT 
Created attachment 454711 [details]
Patch
Comment 7 EWS Watchlist 2022-03-15 08:51:33 PDT 
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
Comment 8 EWS 2022-03-15 10:37:28 PDT 
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].
Comment 9 Brent Fulgham 2022-05-26 14:51:13 PDT 
This fix shipped with Safari 15.5 (all platforms).