最新加入FIDDLE：http://jsfiddle.net/wvUqy/6/
我在Chrome中有一个page_action，它解析来自XHR的响应，制作一个视频剪辑菜单供下载。默认为空白的每个剪辑都有<span class="status">，排队时显示“待处理”，并根据下载停止的方式更改为“中断”（红色）或“完成”。这些行为，以及随着进度的推移，下载完成百分比<span class="status">的更新都可以正常工作。
我尝试换出显示<progress>栏的百分比字符串，但是只要我将该元素引入文档，我就会开始渲染问题仅限我'我没有使用Chrome开发工具。
这是一个2分钟的奇怪行为视频： http://www.youtube.com/watch?v=M50F5ly93MM
顶部的小提琴链接将输出到控制台，因为它会定期（每5秒）更改<span>和<progress>元素的显示属性，但它们永远不会出现。如果您注释掉subDiv.appendChild('progressBar')行并且不做任何其他更改，则<span class="Status">的行为会被神奇地修复。
当文档中没有<progress>元素时，一切都按预期工作;如果在按钮的setInterval函数中创建onclick var，它将按预期工作;如果您在开发工具中“检查元素”结果窗格，它将按预期工作。
在所有情况下，它都可以在Firefox中正常运行，但我正在尝试专门构建Chrome扩展程序。
答案 0 :(得分：1)
你最有可能遇到https://bugs.webkit.org/show_bug.cgi?id=84242的表现形式 - 一个二分法给了我http://trac.webkit.org/changeset/83065，它处理了<progress>元素实现的重大改写。我会将这个问题与这个问题联系起来 - 也许前者会得到更多关注。
答案 1 :(得分：1)
我最近调查了一个进度条错误。我将错误提交给了webkit，你可能会发现它是相关的：https://bugs.webkit.org/show_bug.cgi?id=100507。
答案 2 :(得分：0)
所以显然有一种愚蠢的方法来解决这个问题：http://jsfiddle.net/wvUqy/9/
由于我不太明白的原因，在更新<div>和ChildContainer.style.display = ChildContainer.style.display;元素时对包含<progress>（例如<span>）进行了一些简单的更新将纠正渲染行为。
我已经在我的page_action脚本中实现了它，它运行正常。如果在Chrome中解决了这个错误会很好，但这是一个很好的临时解决方案。