Strange bootstrap progress bar behavior in Firefox

Question

I've got a simple animated bootstrap progress bar in my app that's behaving oddly in Firefox only.

HTML:

<div id="render-progress" class="progress progress-striped active" >
  <div class="bar" style="width: 25%; height:100%;background-color: #CCCCCC;"></div>
</div>

JS:

$('#render-progress .bar').animate({width:'50%'}, 2000);

In Chrome it goes from 25% to 50% like it should, but in Firefox it goes from 25% to 75% to 50%.

It's driving me nuts, I can't figure out why it's acting like that.

SEE FIDDLE: http://jsfiddle.net/dv4Hd/12/

Answer 1

This appears to be a jQuery bug regarding animating using percentages.

It is referenced here but marked as fixed for 1.7 - it reappears in 1.8.3 as changing the jQuery version to 1.6.4 or 1.7.2 in your fiddle will make it work as expected.

Additionally, converting to pixels works as expected: http://jsfiddle.net/dv4Hd/24/

// Must include code when linking to fiddle
var $progressBar = $('#render-progress .bar');
var percentIncrease = 0.50;
var parentWidth = $('.progress').width();
var increasePx = parentWidth * percentIncrease;
$progressBar.animate({width:increasePx}, 2000)

I'll search the queue to make sure a report isn't already active, and submit one this week if not.

Answer 2

$('.bar').animate({width:'50%'});

This seems to work properly But the time property is gone :/ !

But you can still get it up with transition delay :)

Note : I am not sure, but I feel like if the time value in the animate function and the transition-duration is set to same values

$('.bar').animate({width:'50%'},2000);

and in css

transition-duration:2s

The animate seems to work properly :)

Answer 3

It's because you are animating upto only 50% if you set less than this then you'll also face problem in chrome to demo because last position is that position and you are animating to 75% with css3.

So now your animation of 100% in jQuery would be equal to 75% in css. And then you'll not face the problem. demo