Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fixed issue with borders around indeterminate progress bars. #6

Open
wants to merge 2 commits into from

2 participants

@zoltan-dulac

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.

NOTE that I didn't change progress-polyfill.min.js, since I wasn't sure what you used to minify it (I used Google Closure, and it was very different, so I thought I'd ask first).

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 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

Zoltan Hawryluk added some commits
Zoltan Hawryluk A fix to a *small* bug that appears when a border is applied to the p…
…rogress 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. Fixed by changing offsetWidth to clientWidth.
601435c
Zoltan Hawryluk Removed minified version. 720c76a
@LeaVerou
Owner

Wow, sorry for the delay!

Why removed minified version? It would be a nice addition.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 3, 2012
  1. A fix to a *small* bug that appears when a border is applied to the p…

    Zoltan Hawryluk authored
    …rogress 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. Fixed by changing offsetWidth to clientWidth.
Commits on Jan 4, 2012
  1. Removed minified version.

    Zoltan Hawryluk authored
This page is out of date. Refresh to see the latest.
Showing with 1 addition and 7 deletions.
  1. +1 −2  progress-polyfill.js
  2. +0 −5 progress-polyfill.min.js
View
3  progress-polyfill.js
@@ -156,9 +156,8 @@ var self = window.ProgressPolyfill = {
progress.removeAttribute('aria-valuenow');
}
}
-
if(progress.position !== -1) {
- progress.style.paddingRight = progress.offsetWidth * (1-progress.position) + 'px';
+ progress.style.paddingRight = progress.clientWidth * (1-progress.position) + 'px';
}
},
View
5 progress-polyfill.min.js
@@ -1,5 +0,0 @@
-(function(){if(!("position"in document.createElement("progress"))){var h;h=Object.defineProperty?function(a,c,b){b.enumerable=!0;b.configurable=!0;try{Object.defineProperty(a,c,b)}catch(e){if(e.number===-2146823252)b.enumerable=!1,Object.defineProperty(a,c,b)}}:"__defineSetter__"in document.body?function(a,b,d){a.__defineGetter__(b,d.get);d.set&&a.__defineSetter__(b,d.set)}:function(a,b,d){a[b]=d.get.call(a)};try{[].slice.apply(document.images);var i=function(a){return[].slice.apply(a)}}catch(j){i=
-function(a){for(var b=[],d=a.length,e=0;e<d;e++)b[e]=a[e];return b}}for(var f=function(){var a=document.createElement("div");a.foo="bar";return a.getAttribute("foo")==="bar"}(),b=window.ProgressPolyfill={DOMInterface:{max:{get:function(){return parseFloat(this.getAttribute("aria-valuemax"))||1},set:function(a){this.setAttribute("aria-valuemax",a);f||this.setAttribute("max",a);b.redraw(this)}},value:{get:function(){return parseFloat(this.getAttribute("aria-valuenow"))||0},set:function(a){this.setAttribute("aria-valuenow",
-a);f||this.setAttribute("value",a);b.redraw(this)}},position:{get:function(){return this.hasAttribute("aria-valuenow")?this.value/this.max:-1}},labels:{get:function(){for(var a=this.parentNode;a&&a.nodeName!=="LABEL";)a=a.parentNode;a=a?[a]:[];if(this.id&&document.querySelectorAll){var b=i(document.querySelectorAll('label[for="'+this.id+'"]'));b.length&&(a=a.concat(b))}return a}}},redraw:function(a){b.isInited(a)?b.init(a):f||(a.setAttribute("aria-valuemax",parseFloat(a.getAttribute("max"))||1),a.hasAttribute("value")?
-a.setAttribute("aria-valuenow",parseFloat(a.getAttribute("value"))||0):a.removeAttribute("aria-valuenow"));if(a.position!==-1)a.style.paddingRight=a.offsetWidth*(1-a.position)+"px"},isInited:function(a){return a.getAttribute("role")==="progressbar"},init:function(a){if(!b.isInited(a)){a.setAttribute("role","progressbar");a.setAttribute("aria-valuemin","0");a.setAttribute("aria-valuemax",parseFloat(a.getAttribute("max"))||1);a.hasAttribute("value")&&a.setAttribute("aria-valuenow",parseFloat(a.getAttribute("value"))||
-0);for(var c in b.DOMInterface)h(a,c,{get:b.DOMInterface[c].get,set:b.DOMInterface[c].set});b.redraw(a)}},progresses:document.getElementsByTagName("progress")},g=b.progresses.length-1;g>=0;g--)b.init(b.progresses[g]);document.addEventListener&&(document.addEventListener("DOMAttrModified",function(a){var c=a.target,a=a.attrName;c.nodeName==="PROGRESS"&&(a==="max"||a==="value")&&b.redraw(c)},!1),document.addEventListener("DOMNodeInserted",function(a){a=a.target;a.nodeName==="PROGRESS"&&b.init(a)},!1))}})();
Something went wrong with that request. Please try again.