élément de barre de progression rupture rendu Chrome (à moins que Dev Tools ouvert)

Question

mis à jour pour VIOLON: http://jsfiddle.net/wvUqy/6/

J'ai un page_action dans Chrome qui analyse la réponse d'un XHR pour faire un menu de clips vidéo à télécharger. Il y a un <span class="status"> pour chaque clip qui par défaut est vide, affiche "En attente" lorsqu'il est mis en file d'attente et passe à "INTERROMPU" (en rouge) ou "Terminé" en fonction de l'arrêt du téléchargement. Ces comportements, et la mise à jour <span class="status"> avec le pourcentage de téléchargement complet à mesure qu'il progressait tout fonctionne correctement.

J'ai essayé de permuter l'affichage de la chaîne de pourcentage pour un <progress> bar à la place, mais dès que je présente cet élément dans le document, je commence à avoir des problèmes de rendu SEULEMENT QUAND Je ne suis pas en utilisant Chrome Dev Tools.

Voici une vidéo 2min du comportement étrange en action: http://www.youtube.com/watch?v=M50F5ly93MM

Le lien violon à la sortie supérieure de volonté de console comme périodiquement (tous les 5 s) change afficher la propriété pour les éléments <span> et <progress>, mais ils ne jamais apparaître. Si vous commentez la ligne subDiv.appendChild('progressBar') et ne modifiez rien d'autre, le comportement du <span class="Status"> est corrigé par magie.

Tout fonctionne comme prévu quand aucun <progress> éléments sont dans le document; cela fonctionne comme prévu si le setInterval var est créé au sein onclick fonction d'un bouton; cela fonctionne comme prévu si vous "Inspecter élément" le volet de résultat dans Outils de développement.

Dans tous les cas, cela fonctionne comme prévu dans Firefox, mais j'essaie de créer une extension Chrome spécifiquement.

Answer 1

Vous rencontrez probablement une manifestation de https://bugs.webkit.org/show_bug.cgi?id=84242 - une bissection m'a donné http://trac.webkit.org/changeset/83065 qui traitait d'une réécriture majeure de l'implémentation de l'élément <progress>. Je vais lier ce bug à cette question - peut-être que le premier recevra plus d'attention.

Answer 2

Donc, il y a apparemment un moyen hacky pour contourner ceci: http://jsfiddle.net/wvUqy/9/

Pour des raisons que je ne comprends pas tout à fait, ce qui fait une mise à jour trivial au contenant <div> (par exemple ChildContainer.style.display = ChildContainer.style.display;) lors de la mise à jour et l'élément <progress><span> (s) corrigera le comportement de rendu.

J'ai implémenté ceci dans mon script page_action et cela fonctionne très bien. Ce serait bien si ce bug était résolu dans Chrome, mais c'est une bonne solution provisoire.

Answer 3

J'ai étudié un bogue de barre de progression récemment. J'ai déposé le bug sur webkit, vous pouvez le trouver pertinent: https://bugs.webkit.org/show_bug.cgi?id=100507.