Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Fixed issue with borders around indeterminate progress bars. #6

Open
wants to merge 2 commits into from

2 participants

Zoltan Hawryluk Lea Verou
Zoltan Hawryluk

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

added some commits January 03, 2012
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
Removed minified version. 720c76a
Lea Verou
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

Showing 2 unique commits by 1 author.

Jan 03, 2012
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
Jan 04, 2012
Removed minified version. 720c76a
This page is out of date. Refresh to see the latest.
3  progress-polyfill.js
@@ -156,9 +156,8 @@ var self = window.ProgressPolyfill = {
156 156
 				progress.removeAttribute('aria-valuenow');
157 157
 			}
158 158
 		}
159  
-		    
160 159
 		if(progress.position !== -1) {
161  
-		   progress.style.paddingRight = progress.offsetWidth * (1-progress.position) + 'px';
  160
+		   progress.style.paddingRight = progress.clientWidth * (1-progress.position) + 'px';
162 161
 		}
163 162
 	},
164 163
 	
5  progress-polyfill.min.js
... ...
@@ -1,5 +0,0 @@
1  
-(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=
2  
-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",
3  
-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")?
4  
-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"))||
5  
-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))}})();
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.