CODEWITHSUNDEEP
javascripthtmlgoogle-chromeprogress
BooDooPerson
BooDooPerson

Reputation: 316

Progress bar element breaking Chrome rendering (unless Dev Tools open)

UPDATED TO ADD FIDDLE: http://jsfiddle.net/wvUqy/6/

I have a page_action in Chrome that parses the response from an XHR to make a menu of video clips for download. There is a <span class="status"> for each clip that defaults to blank, shows "Pending" when queued, and changes to either "INTERRUPTED" (in red) or "Complete" depending on how the download stops. These behaviors, and updating <span class="status"> with percentage of download complete as it progressed all work fine.

I tried to swap out displaying the percentage string for a <progress> bar instead, but as soon as I introduce that element into the document, I start getting rendering problems ONLY WHEN I'm not using Chrome Dev Tools.

Here's a 2min video of the odd behavior in action: http://www.youtube.com/watch?v=M50F5ly93MM

The fiddle link at the top will output to console as it periodically (every 5s) changes display property for the <span> and <progress> elements, but they never appear. If you comment out the line subDiv.appendChild('progressBar') and change nothing else, the behavior of the <span class="Status"> is magically fixed.

Everything works as expected when no <progress> elements are in the document; it works as expected if the setInterval var is created within a button's onclick function; it works as expected if you "Inspect Element" the result pane in Dev Tools.

In all cases, it works as expected in Firefox, but I'm trying to build a Chrome extension specifically.

Upvotes: 2

Views: 2094

Answers (3)

Ha.
Ha.

Reputation: 3454

I investigated a progress bar bug recently. I filed the bug to webkit, you may find it relevant: https://bugs.webkit.org/show_bug.cgi?id=100507 .

Upvotes: 1

BooDooPerson
BooDooPerson

Reputation: 316

So there is apparently a hacky way to get around this: http://jsfiddle.net/wvUqy/9/

For reasons I don't quite understand, making a trivial update to the containing <div> (e.g. ChildContainer.style.display = ChildContainer.style.display;) when updating the <progress> and <span> element(s) will correct the rendering behavior.

I've implemented this in my page_action script and it works fine. Would be nice if this bug were resolved in Chrome, but this is a fine interim solution.

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

You are most probably running into a manifestation of https://bugs.webkit.org/show_bug.cgi?id=84242 - a bisection gave me http://trac.webkit.org/changeset/83065 which dealt with a major rewrite of the <progress> element implementation. I will link that bug to this question - perhaps the former will get some more attention.

Upvotes: 1

Related Questions