2

更新添加小提琴：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>and<progress>元素的显示属性，但它们永远不会出现。如果您注释掉该行subDiv.appendChild('progressBar')并且不更改任何其他内容，则 的行为<span class="Status">会神奇地固定。

<progress>当文档中没有元素时，一切都按预期工作；如果setIntervalvar 是在按钮的onclick函数中创建的，它会按预期工作；如果您在开发工具中“检查元素”结果窗格，它会按预期工作。

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

4

3 回答 3

1

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

于 2012-06-05T08:09:06.843 回答
1

我最近调查了一个进度条错误。我将错误提交给 webkit，您可能会发现它相关：https ://bugs.webkit.org/show_bug.cgi?id=100507 。

于 2012-10-27T10:20:29.810 回答
0

所以显然有一种解决这个问题的方法：http: //jsfiddle.net/wvUqy/9/

由于我不太明白的原因，在更新and元素时对包含<div>（例如ChildContainer.style.display = ChildContainer.style.display;）进行微不足道的更新将更正呈现行为。<progress><span>

我已经在我的 page_action 脚本中实现了这一点，它工作正常。如果在 Chrome 中解决了这个错误会很好，但这是一个很好的临时解决方案。

于 2012-06-06T01:57:12.583 回答