Skip to content
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.

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

-webkit-gradient issue #112

Closed
fredburger opened this issue Oct 10, 2013 · 6 comments
Closed

-webkit-gradient issue #112

fredburger opened this issue Oct 10, 2013 · 6 comments
Labels

Comments

@fredburger
Copy link

Input (Bootstrap):

.carousel-control.left {
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

Output (note multiple -webkit-*):

.carousel-control.left {
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -webkit-gradient(linear, top left, top right, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
@ai
Copy link
Member

ai commented Oct 10, 2013

The main idea behind Autoprefixer is to write CSS without prefixes by latest W3C specs. So, work with legacy code is not prior high priority. I will fix it, but not soon :).

But, your PR is always welcome :).

@fredburger
Copy link
Author

Hm, ok. But it's an interesting feature to realign precompiled CSS with selected browser versions.

Anyway, thanks for sharing your great work with Autoprefixer!

@ai
Copy link
Member

ai commented Feb 17, 2014

Autoprefixer add double -webkit-gradient because first prefix use different direction -webkit-gradient(linear, 0 top, 100% top. I think to close this issue, because fix will be bad for code climate :).

@cvrebert
Copy link

@ai Would you consider reopening this issue? Now that Autoprefixer is part of Bootstrap's build process, we're running into this bug.

@ai ai reopened this May 22, 2014
@ai
Copy link
Member

ai commented May 22, 2014

@cvrebert bug is only with bigger, but working code?

@cvrebert
Copy link

cvrebert commented Jun 9, 2014

We now believe it was a bug on our side. Sorry for the noise. Thanks for such a great tool!

@ai ai closed this as completed Jun 12, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants