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

See Also:

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

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>
    div {
      /* display: flex; */
      font-size: 80px;
      color: transparent;
      background: url(mask.jpg);
      -webkit-background-clip: text; }

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
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]
Comment 6 Antti Koivisto 2022-03-15 08:49:56 PDT
Created attachment 454711 [details]
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).