search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

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

Open 7iomka opened 6 years ago

7iomka commented 6 years ago

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 commented 2 years ago

Same problem(