search

jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

Animations broken with FF31 update #154

Closed TheDoctor05 closed 9 years ago

TheDoctor05 commented 10 years ago

First of all I want to thank you for the development work you have done. This is a great plug-in. I wanted to report that ever since the FF 31 update the animations do not work, you can go from "slide" to "slide" but the animation is broken. I was trying to look to see if i could catch what exactly is causing the problem but i haven't been able to narrow it down. Any help would be appreciated.

thanks,

TheDoctor05 commented 10 years ago

After more troubleshooting and review i found out that this line: transitionProperty:g(f(e("transform")))+g(f(e("perspective")))+"opacity", in jmpress.min.js was causing the issue because it was creating this css property: transition-property: --transform, --perspective, opacity; That apparently FF 31 did not like.

malzlolli commented 9 years ago

Could you please tell me how you fixed it? Which version of jmpress do you use? I'm using version 0.4.5 (not minified) ...not able to find the line you mentioned above. Thank you!

TheDoctor05 commented 9 years ago

I'm using the same version 0.4.5. I believe the unminiized version of that line of code would be approx line 92: ,transitionProperty: addComma(mapProperty(pfx('transform'))) + addComma(mapProperty(pfx('perspective'))) + 'opacity'

Try that, like I said im not sure why FF31 doesn't like this properties, but it resolved my animations issue.

malzlolli commented 9 years ago

Great! That solved the issue for me too. Thx a lot!

But maybe another browser & specific version or device needs that line of code...

TheDoctor05 commented 9 years ago

NP! so far it works on: chrome : Version 36.0.1985.125 m FF:31 IE 11 (Cannot confirm on older IE)

TheDoctor05 commented 9 years ago

hopefully the developer will read this and may be provide a better backwards compatible solution

omervk commented 9 years ago

The issue here is that Firefox has dropped support for their --moz-* properties, and are instead using the standard ones (--moz-transform is now transform).

The correct fix for this issue is:

  1. In the function pfx, change the value of prefixes from 'Webkit Moz O ms Khtml'.split(' ') to ['Webkit','Moz','O','ms','Khtml',''].
  2. In the function mapProperty, add the line if (prefix === '') return name; after prefix is set.

This fix will both keep backwards compatibility with older browsers and account for those who are standards-compliant from now on, like FF31+ is.

sokra commented 9 years ago

@omervk Would you like to implement this as PR?

omervk commented 9 years ago

Sure, I'll take a crack at it :)

ahmetsali commented 9 years ago

@omervk thank you for the solution!