Firefox中奇怪的bootstrap进度条行为

Question

我的应用程序中有一个简单的动画引导程序进度条,仅在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);

在Chrome中,它应该像它应该的那样从25%到50%,但在Firefox中它从25%到75%到50%.

这让我疯了,我无法弄清楚为什么它会像那样.

看得见: http ://jsfiddle.net/dv4Hd/12/

Answer 1

这似乎是关于使用百分比进行动画处理的 jQuery 错误。

它在这里被引用，但标记为 1.7 的固定 - 它在 1.8.3 中重新出现，因为在你的小提琴中将 jQuery 版本更改为 1.6.4 或 1.7.2 将使其按预期工作。

此外，转换为像素按预期工作：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)

我将搜索队列以确保报告尚未激活，如果没有，则本周提交一份报告。