search

benbarnett / jquery-animate-enhanced

Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE>=10 and Opera and convert animations automatically.
http://playground.benbarnett.net/jquery-animate-enhanced/
MIT License
1.39k stars 196 forks source link

Styling issues with Firefox 20 #120

Closed mseymour closed 10 years ago

mseymour commented 11 years ago

It appears that when using the plugin in Firefox 20+ (Not sure about previous versions) with JQuery UI (both 1.9.2 and 1.10.2), animating (or in my case, toggling a class with animation) causes the element to set the wrong values, and toggling no longer works after using it once.

A basic reproduction of the page with navigation/content CSS and javascript as used: http://jsfiddle.net/Xhz8d/

The left-hand side navigation's element after toggling in firefox (from the inspector):

<header class="masthead" style="transition-property: right; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); margin-left: -208px; padding-right: 8px; right: 200px;">

Chrome:

<header class="masthead navigation-hidden" style="">

Screenshots of the problem in firefox (before/after toggle) and what it should look like (in chrome): firefox - before toggle firefox - after toggle chrome - before toggle chrome - after toggle

benbarnett commented 10 years ago

This seems fine in latest Firefox, feel free to reopen if not :)