leaverou / html5-progress-polyfill

Polyfill for the HTML5 <progress> element

Demo

html5-progress-polyfill's Issues

demo link broken

Improper node matching

You should match only HTML elements, as you currently match non-HTML <progress> elements and don't match HTML <progress> elements in an XML context. Here's a helper function that should make it easy:

function match_HTML_element(elt, name) {
    if (elt.nodeType === elt.ELEMENT_NODE) {
        return false;
    }
    var elt_name = elt.localName;
    if (!elt.ownerDocument.xmlVersion) {
        elt_name = elt_name.toLowerCase();
    }
    return elt.namespaceURI === "http://www.w3.org/1999/xhtml" && elt_name === name;
}

You'd want to replace node.nodeName === 'PROGRESS' with match_HTML_element(node, "progress") and label.nodeName !== 'LABEL' with !match_HTML_element(label, "label") in your code.

Property descriptors should have enumerable:true and configurable:true

All property descriptors you pass to Object.defineProperty should have enumerable:true and configurable:true. IE8 doesn't support enumerable:true and will throw an error, which you can catch and correct as I do in my classList and outerHTML shims.

IE <= 9 failure

I have a page using KnockoutJS. This polyfill breaks because of the implementation of isInited(). I'm assuming KO is cloning the element somehow that's not compatible with your polyfill.

The current implementation looks like this:

isInited: function(progress) {
    return progress.getAttribute('role') === 'progressbar';
}

I changed it to look like this and it fixed it:

isInited: function(progress) {
    return 'position' in progress;
}

I'd submit a pull request but I'm not certain this is the best solution.

document.createElement required for IE8 support

A minor omission from the "how to use" documentation on the web site: it seems that for IE8 to work correctly, it needs the document.createElement("progress") line in the section otherwise IE8 doesn't apply the CSS.

Broken when accessors are unsupported

In your // Fallback to regular properties if getters/setters are not supported section, it's quite clear without running it that it won't work as intended. You want etters.get.call(o).

Small Issue with borders in progress in polyfilled browsers

A small bug appears when a border is applied to the progress bar. If the value of the progress bar is set to zero, the progress bar increases in width slightly, until the value is changed to a non-zero value. You can see what I mean here:

http://www.useragentman.com/tmp/progressPolyfill/test1.html

In order to fix this issue, I changed line 161 in your script from:

if(progress.position !== -1) {
progress.style.paddingRight = progress.offsetWidth *
(1-progress.position) + 'px';
}

to this:

if(progress.position !== -1) {
progress.style.paddingRight = progress.clientWidth *
(1-progress.position) + 'px';
}

(Note the change from offsetWidth to clientWidth). When this is applied, the jump in width doesn't happen anymore, as seen here:

http://www.useragentman.com/tmp/progressPolyfill/test1-fixed.html

Is it possible to release it as an npm package?

Not a big deal and could be integrated very easily!

iOS support

Can you confirm this works on iOS?

I tried setting progressElement.value = 50; though it doesn't seem to do anything on iOS 5.1.

Thanks!

leaverou.me -> lea.verou.me

The link in the description is broken.

Polyfill for the HTML5 <progress> element http://leaverou.me/polyfills/progress/

should be

Polyfill for the HTML5 <progress> element http://lea.verou.me/polyfills/progress/

(added a dot between "lea" and "verou")