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

remove -ms- prefixes for particular IE10 features #924

Closed
paulirish opened this issue Jun 7, 2012 · 22 comments
Closed

remove -ms- prefixes for particular IE10 features #924

paulirish opened this issue Jun 7, 2012 · 22 comments
Labels

Comments

@paulirish
Copy link
Contributor

@paulirish paulirish commented Jun 7, 2012

based on http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx

we don't need ms prefixes on transitions, gradients, or keyframe animations. let's strip them out.

@alanhogan
Copy link

@alanhogan alanhogan commented Jun 7, 2012

Nice :)

I absolutely love that Compass users have these decisions made for them for free. +1

@alanhogan
Copy link

@alanhogan alanhogan commented Jun 7, 2012

Also, big ups to MS for helping battle excessive prefixing here.

@chriseppstein
Copy link
Member

@chriseppstein chriseppstein commented Jun 9, 2012

@paulirish Was there never a shipped version of IE that had these prefixed then?

@paulirish
Copy link
Contributor Author

@paulirish paulirish commented Jun 9, 2012

Was there never a shipped version of IE that had these prefixed then?

Nope. Just IE10 platform previews.

IE9 has prefixed transforms (and IE10 will not) so we're stuck with -ms-transform for a while

chriseppstein added a commit that referenced this issue Jun 24, 2012
chriseppstein added a commit that referenced this issue Jun 24, 2012
@chriseppstein
Copy link
Member

@chriseppstein chriseppstein commented Jun 24, 2012

Fixed. Thanks for the heads up!

@salimhb
Copy link

@salimhb salimhb commented Jul 2, 2014

For people who might be puzzled when linear-gradient doesn't work in IE10 in some cases without adding the -ms prefix, read this: http://joshuapaling.com/post/compass-background-gradients-not-working-ie10

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

I use Compass to simplify my coding process on faith that it is covering all important edge cases. However, after going to my newest site on a friend's PC, I discovered that the background gradients are completely messed up in IE 10.

Do you think we can reverse this commit and add the -ms- prefix back into Compass gradients? The -ms- browser prefix increases the weight of CSS no more than the -o- browser prefix, and yet it reaches a much larger audience.

@salimhb
Copy link

@salimhb salimhb commented Jul 18, 2014

@vote539 there's no need for the ms- prefix, check the link I posted in my previous comment.

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

I read your link yesterday. What I'm saying here is something different.

I understand that the objective of Compass is to ease development by making CSS statements cross-browser-compatible when possible. The fact that I can write a SASS linear-gradient statement that works in WebKit and Gecko but not IE 10, despite the fact that the documentation for that function claims to support IE 10, is a problem.

If I had not used Compass in my project and instead used one of the CSS gradient generators available online, my site would have worked in IE 10 from the start. That's also a problem.

I think it's great that IE 10 supports the W3C standard linear-gradient without a prefix. However, Compass should either always output linear-gradient statements that are compatible with IE, or it should output the -ms- prefix to increase compatibility.

@salimhb
Copy link

@salimhb salimhb commented Jul 18, 2014

In my case, Solution 1 from that link worked, but Solution 4 seems to cover all cases, have you tried it?
The thing is that the problem here is about the parameters passed to linear-gradient, not the support for linear-gradient itself.

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

My site uses a limited number of left-to-write gradients, so Solution 1 won't work for me. I ended up using Solution 3. But that's not my point. I can always find workarounds. If Compass is supposed to make my life easier, it should prevent me from ever needing to read that article.

@cimmanon
Copy link

@cimmanon cimmanon commented Jul 18, 2014

@vote539 Do you have any information to backup your claims? Caniuse reports IE10 as being prefix free and having "complete support" (which means that it supports all features found in the current W3C specification). Compass (as of 1.0) decides which prefixes are valid based on information provided by Caniuse, this information is not coded by hand like it was in 0.12 and older.

@salimhb
Copy link

@salimhb salimhb commented Jul 18, 2014

@vote539 I agree, I don't like Solution 3 either, have you tried Solution 4 using 90deg for the gradient direction?
so it would be: @include background-image(linear-gradient(90deg, ...))

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

Here's the code I was using.

@include background-image(linear-gradient(left, $color1 40%, $color2 50%));

Try it. It works in WebKit and Gecko, but not in IE 10.

Sure, if I read the article salimhb posted, I can change my code to make it work in IE 10. That's not my point. If Compass is trying to make my life easier, it should either complain if I try using the left keyword instead of the 90deg keyword, or it should deal with the problem some other way like by adding a line with a -ms- prefix. 😃

@salimhb
Copy link

@salimhb salimhb commented Jul 18, 2014

@vote539 as the link says: "I noticed it wasn’t working in IE 10, and on further investigation, the problem is actually that IE 10 is going by the WC3 standards (Gasp!) and Compass (following the implementation in other browsers) isn’t."

If you go to the W3C page, you will see that left as a direction is not standard, you can use [ <angle> | to <side-or-corner> ]. So left is not standard, to right is correct, or the XXdeg keyword. Compass should not take care of converting left to to right, that's too much magic, you should take care of using the correct standard values. And these generators around the web should be doing that too.

@chriseppstein
Copy link
Member

@chriseppstein chriseppstein commented Jul 18, 2014

In compass 1.0:

.bg-linear-gradient-pixel-stop-from-top
  +background-image(linear-gradient(top, #ddd 10px, #aaa 40px))

produces:

.bg-linear-gradient-pixel-stop-from-top {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
  background-image: -webkit-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
  background-image: linear-gradient(to bottom, #dddddd 10px, #aaaaaa 40px); }

so the old syntax is converted to the new standard and works great in IE 10.

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

Using Legacy "left" Syntax

Compass version 0.12.7

// app.scss
@import "compass";

$color1: red;
$color2: orange;

.example{
        @include background-image(linear-gradient(left, $color1 40%, $color2 50%));
}
$ compass compile
overwrite stylesheets/app.css
/* app.css */
.example {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(40%, #ff0000), color-stop(50%, #ffa500));
  background-image: -webkit-linear-gradient(left, #ff0000 40%, #ffa500 50%);
  background-image: -moz-linear-gradient(left, #ff0000 40%, #ffa500 50%);
  background-image: -o-linear-gradient(left, #ff0000 40%, #ffa500 50%);
  background-image: linear-gradient(left, #ff0000 40%, #ffa500 50%);
}

Firefox 30:
firefox

IE 11:
ie-broken

Safari 5.1 for Windows:
safari


Using W3C "to right" Syntax

Compass version 0.12.7

// app.scss
@import "compass";

$color1: red;
$color2: orange;

.example{
        @include background-image(linear-gradient(to right, $color1 40%, $color2 50%));
}
$ compass compile
Cannot determine the opposite position of: to
overwrite stylesheets/app.css
/* app.css */
.example {
  background-image: -webkit-gradient(linear, to right, to left, color-stop(40%, #ff0000), color-stop(50%, #ffa500));
  background-image: -webkit-linear-gradient(to right, #ff0000 40%, #ffa500 50%);
  background-image: -moz-linear-gradient(to right, #ff0000 40%, #ffa500 50%);
  background-image: -o-linear-gradient(to right, #ff0000 40%, #ffa500 50%);
  background-image: linear-gradient(to right, #ff0000 40%, #ffa500 50%);
}

Firefox 30:
firefox

IE 11:
ie

Safari 5.1 for Windows:
safari-broken


In other words, if I use the legacy syntax, the gradient does not work in IE 11. But if I use the W3C standard syntax, the gradient does not work in an old version of Safari. For what it's worth, when I use the 90deg syntax, Firefox 30 and IE 11 work but Safari 5.1 renders the gradient in the vertical direction.

Since @chriseppstein shows that Compass 1.0 will convert top into to bottom, and presumably left into to right, then that's the best solution that will solve this issue for all browsers. However, the problem remains for version 0.12.7, which is the current stable.

@cimmanon
Copy link

@cimmanon cimmanon commented Jul 18, 2014

@vote539 Your issue is fixed in 1.0. Either write a workaround for 0.12 or upgrade. Continuing to complain about this doesn't seem very productive.

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

@cimmanon You asked me "Do you have any information to backup your claims?". Thus I created the demo posted above. I don't mean to complain. 😃

@vote539
Copy link

@vote539 vote539 commented Jul 18, 2014

For what it's worth, here is the related thread where the issue is fixed for Compass 1.0 and people are raised similar issues as I raised here. I was not aware that thread existed or I would not have posted in here. 😊

#965

@chriseppstein
Copy link
Member

@chriseppstein chriseppstein commented Jul 18, 2014

I did a bunch of work on gradients in the last couple weeks. I think it's solid. Please use compass 1.0 (gem install compass --pre) and let me know if you find any bugs!

@chriseppstein
Copy link
Member

@chriseppstein chriseppstein commented Jul 19, 2014

Right. And I read those and made more fixes :)

On Fri, Jul 18, 2014 at 2:40 PM, vote539 notifications@github.com wrote:

For what it's worth, here is the related thread where the issue is fixed
for Compass 1.0 and people are raised similar issues as I raised here.
#965 #965


Reply to this email directly or view it on GitHub
#924 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants