search

louisremi / jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.
435 stars 81 forks source link

Nothing works on Firefox 3.6 #6

Closed niieani closed 12 years ago

niieani commented 13 years ago

Hey

I've hoped this would be a great solution for all the CSS3 cross-browser transitions, but unfortunately the plugin doesn't behave on FF 3.6. I'm getting:

curRule.style is undefined (on line 65)
transition = curRule.style["transition-property"];

This is using the provided test (animated menu with padding). It works in IE8, but not in FF3.6 I'm afraid.

niieani commented 13 years ago

Okay, I've added support for FF <=3.6. It was a pain and I've spent like 10 hours just to get it working (when I started I thought it will be like 20 minutes). Still some bugs are present, but it should not be to hard to fix them (maybe somebody could help?).

Before pulling to master we should add conditional loading of JSCSSP (it's required for the fixes to work). That is, if a Gecko browser < 2.0 is detected we load the JS. It's pretty massive, but as far as I know that's the only way to make hoverTransition work. This is because of a bug in all Firefox versions prior to 4.0 - it doesn't load the unknown properties to the document.styleSheets object, hence we have to manually re-parse the CSS.

I've forked the project and made the changes here: https://github.com/niieani/jquery.transition.js/tree/

This is why FF nor old Safari would be supported by the core currently present: http://stackoverflow.com/questions/2926326/can-i-access-the-value-of-invalid-custom-css-properties-from-javascript

For old Safari it might be good to add vendor specific CSS, like -jquery-transition-property - it should work then with the IE method.

louisremi commented 13 years ago

Wow, that's a hell of a hack. I probably won't merge it in my branch though, I don't want to support such old browsers. But I do appreciate the effort.

niieani commented 13 years ago

Well, while I can agree on 'old browsers' part, according to statcounter, FF3.6 is still used by 1 in 10 people in Europe, and over 8% of population around the world. Even IE7 has only about 4% and that is currently supported by your plugin. The support is almost complete, so maybe there could be some compromise as to how we could incorporate the 3.6 support without making it heavier for the normal user. (or just keep two separate branches, one with FF3.6 support, one without).

btw. great work on the plugin itself :)

When I was debugging for FF I think I've spotted an error on the way pseudoSelector object gets :hover multiple times (so the state is :hover :hover) Is this by design or is something going wrong, even though it is working?

jrochkind commented 12 years ago

Another option is fixing things so on FF3.6, it properly degrades to 'ordinary' JQuery animations, instead of an exception?

louisremi commented 12 years ago

I'm currently thinking of dropping the hoverTransition script. It has never been flexible enough to really emulate "hover transitions".