Geek Answers Handbook

Strange bootstrap behavior in Firefox

I have a simple animated download indicator in my application that behaves strangely only in Firefox.

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 ranges from 25% to 50%, as expected, but in Firefox it ranges from 25% to 75% to 50%.

It drives me crazy, I can’t understand why this is so.

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

+6
source share
3 answers

This seems to be a jQuery bug regarding percent animation.

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

In addition, the conversion 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 will search the queue to make sure the report is not active yet, and send it this week if not.

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

This seems to work correctly. But the time property is missing: /!

But you can still get it with a delayed transition :)

Note: I'm not sure, but it seems to me that if the time value in the animate function and the transition duration are set to the same values

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

and in css

 transition-duration:2s

The animat is expected to work correctly :)

+2
source

This is because you only animate 50% , if you set less than that, then you will also encounter a problem in chrome to demonstrate , because the last position is the position and you are animating up to 75% using css3.

So, now your animation 100% in jQuery will be equal to 75% in css. And then you will not run into a problem. demo

0
source

More articles:


All Articles