javascript - 进度条元素破坏 Chrome 渲染(除非开发工具打开)

Question

已更新以添加 FIDDLE:http://jsfiddle.net/wvUqy/6/

我在 Chrome 中有一个 page_action，它解析来自 XHR 的响应以制作视频剪辑菜单以供下载。有一个 <span class="status">对于默认为空白的每个剪辑，在排队时显示“待定”，并根据下载停止的方式更改为“中断”(红色)或“完成”。这些行为，更新<span class="status">下载完成的百分比随着它的进展一切正常。

我试图换掉显示 <progress> 的百分比字符串bar 而不是，但是一旦我将该元素引入文档中，我就开始遇到渲染问题仅当我没有使用 Chrome 开发工具时。

这是一段 2 分钟的视频，展示了奇怪的行为: http://www.youtube.com/watch?v=M50F5ly93MM

顶部的 fiddle 链接将输出到控制台，因为它会定期(每 5 秒)更改 <span> 的显示属性。和 <progress>元素，但它们从未出现。如果您注释掉 subDiv.appendChild('progressBar') 行并且没有改变，<span class="Status"> 的行为神奇地固定了。

当没有 <progress> 时一切正常元素在文档中；如果 setInterval 会按预期工作var 是在按钮的 onclick 中创建的功能;如果您在 Dev Tools 中“检查元素”结果 Pane ，它会按预期工作。

在所有情况下，它在 Firefox 中都按预期工作，但我正在尝试专门构建一个 Chrome 扩展。

Answer 1

您很可能遇到了 https://bugs.webkit.org/show_bug.cgi?id=84242 的表现形式- 平分给了我 http://trac.webkit.org/changeset/83065处理了对 <progress> 的重大重写元素实现。我会将那个错误与这个问题联系起来——也许前者会得到更多关注。