inline-style-prefixer
inline-style-prefixer copied to clipboard
Incorrectly prefixes a mask-image property with a radial-gradient value
With this style object:
{
maskImage: 'radial-gradient(closest-side, black, transparent)'
}
Using inline-style-prefixer (via fela-preset-web), the resulting prefixed properties and rules are all unusable in Chrome:
-webkit-mask-image: -webkit-radial-gradient(closest-side, black, transparent),-moz-radial-gradient(closest-side, black, transparent),radial-gradient(closest-side, black, transparent);
mask-image: -webkit-radial-gradient(closest-side, black, transparent);
mask-image: -moz-radial-gradient(closest-side, black, transparent);
mask-image: radial-gradient(closest-side, black, transparent);
Here is the correct result from stylis (via styled-jsx), that works in Chrome:
-webkit-mask-image: radial-gradient(closest-side,black,transparent);
mask-image: radial-gradient(closest-side,black,transparent);
Is there a workaround we can use before this bug is fixed?