Autoprefixer: gradient / -webkit-gradient

Created on 15 Nov 2017  路  1Comment  路  Source: postcss/autoprefixer

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.

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

>All comments

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

Was this page helpful?
0 / 5 - 0 ratings