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

Comments

Projects
None yet
6 participants
@paulirish
Contributor

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

This comment has been minimized.

Show comment
Hide comment
@alanhogan

alanhogan Jun 7, 2012

Nice :)

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

alanhogan commented Jun 7, 2012

Nice :)

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

@alanhogan

This comment has been minimized.

Show comment
Hide comment
@alanhogan

alanhogan Jun 7, 2012

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

alanhogan commented Jun 7, 2012

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

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jun 9, 2012

Member

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

Member

chriseppstein commented Jun 9, 2012

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Jun 9, 2012

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jun 24, 2012

Member

Fixed. Thanks for the heads up!

Member

chriseppstein commented Jun 24, 2012

Fixed. Thanks for the heads up!

@salimhb

This comment has been minimized.

Show comment
Hide comment
@salimhb

salimhb 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

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

This comment has been minimized.

Show comment
Hide comment
@vote539

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

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

This comment has been minimized.

Show comment
Hide comment
@salimhb

salimhb Jul 18, 2014

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

salimhb commented Jul 18, 2014

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

@vote539

This comment has been minimized.

Show comment
Hide comment
@vote539

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

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

This comment has been minimized.

Show comment
Hide comment
@salimhb

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

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

This comment has been minimized.

Show comment
Hide comment
@vote539

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

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

This comment has been minimized.

Show comment
Hide comment
@cimmanon

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

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

This comment has been minimized.

Show comment
Hide comment
@salimhb

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

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

This comment has been minimized.

Show comment
Hide comment
@vote539

vote539 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. 😃

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

This comment has been minimized.

Show comment
Hide comment
@salimhb

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

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jul 18, 2014

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@vote539

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

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

This comment has been minimized.

Show comment
Hide comment
@cimmanon

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

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

This comment has been minimized.

Show comment
Hide comment
@vote539

vote539 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 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

This comment has been minimized.

Show comment
Hide comment
@vote539

vote539 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

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jul 18, 2014

Member

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!

Member

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

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jul 19, 2014

Member

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

Member

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