-webkit-background-clip doesn't work on elements with display: flex / inline-flex

[7iomka]

Hello. Only now I noticed a very strange bug. If the element is a flex / inline-flex element, it is not displayed on the screen if styles are applied to it is like:

background: url(YOUR IMAGE) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

Browser - Chrome 44.0.2403.130 (yes is old, but i tested different prefixed display flex variants, and solution how to fix that issue is not found)
I'm not asking for tips to update the browser, I'm creating a crossbrowser button component in which the content can be a font icon, custom text, and one more icon for example. It is convenient for me on a container with content to use flex.

Online demo: https://codepen.io/7iomka/full/Ovrzgv/

[arthurseredaa]

Same problem(