[jss-vendor-prefixer] Edge doesn't support -ms- prefix for keyframes

[Evalon]

Microsoft Edge 41.16299.334.0 doesn't support -ms- prefix for keyframes. So logic to add a prefix to keyframes in any situation doesn't work anymore and leads to not worked animations. But to be precise I did not find a changelog or something for Edge to be sure that was intentional.

[kof]

yes, lets fix this

[AleshaOleg]

@Evalon according to caniuse data - https://caniuse.com/#search=keyframes Keyframes don't need a prefix. Isn't it?

[Evalon]

You right. For IE and Edge that's true, but for some old browsers it's still needed.

[AleshaOleg]

@Evalon we do not support, IE < 10 as I remember

[AleshaOleg]

@Evalon Can I close this issue?

[Evalon]

@ubergrape Even if IE < 10 is not supported, but plugin logic adds prefix even for new browsers. And for IE and Edge is -ms-. That follows to not worked keyframes in Edge.

[AleshaOleg]

@Evalon there is a full support of keyframes for all of Edge version and IE >= 10. What's a problem? Do you have any examples of non-working keyframes in Edge?

https://developer.mozilla.org/en-US/docs/Web/CSS/%40keyframes

[Evalon]

@ubergrape Example: https://codepen.io/anon/pen/GdmRyo

[Evalon]

@ubergrape I can create a pull request if you want. We just need to check if css-vendor return -ms- then we don't add it to keyframes. One of the possible solutions I think.

[AleshaOleg]

@Evalon it's not working even in latest Chrome. Change your code to:

@keyframes someName {
  from {background-color: red;}
  to {background-color: blue;}
}

Everything will work fine.

[Evalon]

@ubergrape That's true and that's where is plugin went wrong. It's added -ms- prefix.

[AleshaOleg]

@Evalon ok, got it. Checking.

[AleshaOleg]

@Evalon take a look at this. https://codesandbox.io/s/lxl8mwj1l7

Tested on Microsoft Edge 41.16299.371.0

https://www.dropbox.com/s/2w8cckokbh2lmn7/Microsoft%20Edge%205_1_2018%209_07_20%20PM.mp4?dl=0

[Evalon]

@ubergrape You use jss-preset-default that doesn't have the latest version of jss-vendor-prefixer in its turn it doesn't have latest css-vendor with the fix for Edge so prefix is empty. Try this (uses latest jss-vendor-prefixer): https://codesandbox.io/s/1vkv3v9724

[AleshaOleg]

https://github.com/cssinjs/jss-vendor-prefixer/pull/12

[AleshaOleg]

Fixed in 8.0.1. cc @Evalon. Thanks to you!

[azarual]

i have a keyframes that doesn't work on edge even though it's so simple @keyframes backgroundAfter{ 0%{width:100%;} 100%{width:340%;} } you can see it on my website www.home-pharma.fr can some one help me to solve it

[AleshaOleg]

@azarual thanks for reporting. Can confirm. @kof @HenriBeck animations throw keyframes are not working at all in JSS@10. Can somebody check this? Seems prefixing by css-vendor working fine.

[kof]

@AleshaOleg can you create a separate issue with reproduction pls?

[AleshaOleg]

@kof https://github.com/cssinjs/jss/issues/1120

[AleshaOleg]

@azarual please check this answer - https://github.com/cssinjs/jss/issues/1120#issuecomment-500742090