2

フィドルを追加するために更新: http://jsfiddle.net/wvUqy/6/

Chrome に、XHR からの応答を解析してダウンロード用のビデオ クリップのメニューを作成する page_action があります。<span class="status">デフォルトでは空白で、キューに入れられると「保留中」と表示され、ダウンロードの停止方法に応じて「中断」（赤）または「完了」のいずれかに変化する for each クリップがあります。<span class="status">これらの動作、および進行中のダウンロード完了のパーセンテージによる更新は、すべて正常に機能します。

代わりにパーセンテージ文字列の表示をバーに置き換えようとしました<progress>が、その要素をドキュメントに導入するとすぐに、Chrome 開発ツールを使用していない場合にのみレンダリングの問題が発生し始めます。

これは、実際の奇妙な動作の 2 分間のビデオです: http://www.youtube.com/watch?v=M50F5ly93MM

<span>上部のフィドル リンクは、および<progress>要素の表示プロパティを定期的 (5 秒ごと) に変更するため、コンソールに出力されますが、それらは表示されません。行をコメントアウトしてsubDiv.appendChild('progressBar')他に何も変更しない場合、 の動作<span class="Status">は魔法のように修正されます。

<progress>ドキュメントに要素がない場合、すべてが期待どおりに機能します。setIntervalvar がボタンのonclick関数内で作成されている場合は、期待どおりに機能します。Dev Tools の結果ペインで「Inspect Element」を実行すると、期待どおりに動作します。

いずれの場合も、Firefox では期待どおりに動作しますが、特に Chrome 拡張機能を構築しようとしています。

4

3 に答える 3

1

最近プログレスバーのバグを調査しました。バグを webkit に提出しました。関連があるかもしれません: https://bugs.webkit.org/show_bug.cgi?id=100507。

于 2012-10-27T10:20:29.810 に答える
1

あなたはおそらくhttps://bugs.webkit.org/show_bug.cgi?id=84242の兆候に出くわしているでしょう- 二分法でhttp://trac.webkit.org/changeset/83065が得られ、大幅な書き換えが行われました要素の<progress>実装の。そのバグをこの質問にリンクします-おそらく前者はもう少し注目されるでしょう。

于 2012-06-05T08:09:06.843 に答える
0

したがって、これを回避するためのハックな方法があるようです: http://jsfiddle.net/wvUqy/9/

理由はよくわかりませんが、と要素を更新するときに、含まれているもの<div>(たとえばChildContainer.style.display = ChildContainer.style.display;) に些細な更新を行うと、レンダリングの動作が修正されます。<progress><span>

これを page_action スクリプトに実装しましたが、問題なく動作します。このバグが Chrome で解決されればいいのですが、これは暫定的な解決策です。

于 2012-06-06T01:57:12.583 に答える