remove -ms- prefixes for particular IE10 features

[paulirish]

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]

Nice :)

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

[alanhogan]

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

[chriseppstein]

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

[paulirish]

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]

Fixed. Thanks for the heads up!

[salimhb]

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]

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]

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

[vote539]

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]

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]

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]

@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]

@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]

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]

@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]

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]

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:

IE 11:

Safari 5.1 for Windows:

---

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:

IE 11:

Safari 5.1 for Windows:

---

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]

@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]

@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]

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]

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]

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