question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autoprefix background-clip and text-fill-color?

See original GitHub issue

Preface: Not sure if this is an “issue” or something you care to implement. Just something I notice while testing.

Using this trick: http://css-tricks.com/snippets/css/gradient-text

Autoprefixer isn’t adding prefixes (-webkit-) to background-clip and text-fill-color.

http://caniuse.com/#search=background-clip http://caniuse.com/#search=text-fill-color

background: linear-gradient(#eee, #333);
background-clip: text;
text-fill-color: transparent;

Is currently prefixed as:

background: -webkit-linear-gradient(#eee, #333);
background: linear-gradient(#eee, #333);
background-clip: text;
text-fill-color: transparent;

Should be prefixed as:

background: -webkit-linear-gradient(#eee, #333);
background: linear-gradient(#eee, #333);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;

Issue Analytics

  • State:closed
  • Created 10 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
wzupcommented, Sep 9, 2017

background-clip doesn’t work.

background-clip - google chrome 2017-09-09 20 24 59

The issue was raised in 2013. Now there is September 2017 background-clip doesn’t work

4reactions
nickensoulcommented, Mar 28, 2017

There is 2017 now and I just want to show you this: screenshot at mar 28 13-32-48 It works in Firefox 52.0.1 (x64), but not in Safari 10.0.3, Safari still needs vendor prefixed background-clip: text.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS background-clip text | Michael Gearon
Guide on the CSS property "background-clip: text" to add a background image to HTML text by ... -webkit-text-fill-color: transparent;.
Read more >
background-clip - CSS: Cascading Style Sheets | MDN
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
Read more >
How To Do Knockout Text | CSS-Tricks
There are a couple of ways to do knockout text (text that appears cut out, such that you can see a background behind...
Read more >
-webkit-background-clip:text CSS effect - CodePen
Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser. Set a color fallback f...
Read more >
Shaw on Twitter: "@CodePen Note: Wrapped in an ﹫supports ...
#CSS Quick Tip: Fade out text with linear-gradient, background-clip: text and ... Yeah; I was using Autoprefixer to add that automatically, but I've...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found