Autoprefix background-clip and text-fill-color?
See original GitHub issuePreface: 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:
- Created 10 years ago
- Reactions:2
- Comments:7 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
background-clip
doesn’t work.The issue was raised in 2013. Now there is September 2017
background-clip
doesn’t workThere is 2017 now and I just want to show you this:
It works in Firefox 52.0.1 (x64), but not in Safari 10.0.3, Safari still needs vendor prefixed
background-clip: text
.