New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrectly prefixes a mask-image property with a radial-gradient value #203

Open

jaydenseric opened this issue Feb 3, 2021 · 1 comment

jaydenseric commented Feb 3, 2021 •

edited

Loading

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);

The text was updated successfully, but these errors were encountered:

Author

jaydenseric commented Feb 3, 2021

Is there a workaround we can use before this bug is fixed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment