2

I have 3 absolute positioned containers inside a wrapper that I am animating with jQuery.

My animation function:

function slideContainer(container, easing, offset){
    direction = (container.hasClass('out')) ? '+' : '-';
    //margin = (container.hasClass('out')) ? 0 : -offset;
    container.stop().animate({
        left: direction+"="+offset
        //'margin-left' : margin
    }, 650, easing, function() {
        $(this).toggleClass('out');
    });
};

I'm on a Linux Box. In Chrome everything is working as expected. But in Firefox 25 the left positions of my containers get randomly set to different values. I just tested this on latest Firefox/Windows. Same problem there.

Everything in action in this fiddle: http://jsfiddle.net/gebeer/F2DZH/ Click on a Navigation item to slide left and on the red Subnav container to slide back.

When I animate margin-left instead of position left it works fine in both browsers.

Can anybody confirm this or point me to a bug in my code? Thank you.

UPDATE: After fiddling some more time I found that the problem in FF seems to be related to the easing function I was using. Originally I used easeInBack which is from jquery.easing.1.3 plugin. When I use the standard swing function the weird behaviour stops.

To reproduce this, just change var easing in the fiddle.

Still I would like to use easeInBack. Any ideas how we can fix the FF problem would be much appreciated.

gebeer
  • 703
  • 6
  • 8
  • I am not so sure about this.. First time , i tried the fiddle . i saw different positioning of the sub nav. When i loaded the fiddle again after using margin and then commenting it out in favor of position, it worked properly. – The Dark Knight Feb 05 '14 at 12:35
  • @The Dark Knight Thanks for having a look. Exactly the same as I observe. But there seems to be nothing wrong with my code? – gebeer Feb 05 '14 at 13:09
  • In the meantime I found that the jquery-easing function easeInBack causes the problem in FF. I updated my post and JSFiddle. – gebeer Feb 06 '14 at 12:10
  • OK, this seems to be too specific. I can't find a solution either. So I just don't use the jQuery easing function that causes the trouble. – gebeer Feb 11 '14 at 08:40

0 Answers0