Autoprefixer doesn't transform gradient, when used with mask-image to -webkit-gradient.
Without -webkit- on gradient the mask will not work in Chrome, Firefox and Safari.
Input:
```css
.test {
mask-image: gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
````
Output:
```css
.test {
-webkit-mask-image: gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
````
Expected (working in browsers):
```css
.test {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
````
Edit: It appears that there are more complex variations of -webkit-gradient like with using it color-stop.
You gradient syntax is wrong, check gradient docs about latest syntax (if you will use correct W3C syntax, Autoprefixer will convert gradient to old -webkit- syntax).
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Most helpful comment
You gradient syntax is wrong, check gradient docs about latest syntax (if you will use correct W3C syntax, Autoprefixer will convert gradient to old
-webkit-syntax).https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient