Firefox 中奇怪的引导进度条行为答案

【问题标题】：Strange bootstrap progress bar behavior in FirefoxFirefox 中奇怪的引导进度条行为
【发布时间】：2014-04-05 09:10:52
【问题描述】：

我的应用中有一个简单的动画引导进度条，仅在 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%。

这让我发疯了，我不明白为什么会这样。

见 FIDDLE： http://jsfiddle.net/dv4Hd/12/

【问题讨论】：

@MageshKumaar 小于什么？
改为以像素为单位设置进度条的宽度
看来 10% 有效。很奇怪。
可能相关：stackoverflow.com/questions/6877081/… 虽然所引用的错误在 07 年被标记为已修复？
我认为这证实了动画百分比的错误问题：jsfiddle.net/dv4Hd/23

标签： jquery css twitter-bootstrap firefox

【解决方案1】：

这似乎是一个关于使用百分比动画的 jQuery 错误。

它被引用here，但在 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)

我将搜索队列以确保报告尚未处于活动状态，如果没有，则在本周提交一份。

【讨论】：

我已经确认像素工作正常，所以我现在正在使用它 - 感谢您研究错误和跟进 - 如果您收到他们的回复，请更新我们

【解决方案2】：

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

这似乎工作正常但是时间属性消失了：/！

但您仍然可以通过转换延迟来解决问题 :)

注意： 我不确定，但我觉得动画函数中的时间值和过渡持续时间是否设置为相同的值

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

在css中

transition-duration:2s

动画似乎工作正常:)

【讨论】：

有趣的是，当排除持续时间时，该错误不存在。应该有助于调试。
我有点困惑。该错误来自时间属性还是什么？有趣的。不是吗？

【解决方案3】：

这是因为如果您设置的小于此值，您将仅在 50% 上设置动画，那么您在 chrome 到 demo 时也会遇到问题，因为最后一个位置是该位置，而您使用 css3 将动画设置为 75%。

所以现在您在 jQuery 中 100% 的动画将等于在 css 中的 75%。然后你就不会面对这个问题了。 demo

【讨论】：

很抱歉没有遵循您的逻辑或您提出的解决方案。你是说动画到 50% 是不可能的吗？