Skip to content

Fixed issue with borders around indeterminate progress bars.#6

Open
zoltan-dulac wants to merge 2 commits intoLeaVerou:masterfrom
zoltan-dulac:master
Open

Fixed issue with borders around indeterminate progress bars.#6
zoltan-dulac wants to merge 2 commits intoLeaVerou:masterfrom
zoltan-dulac:master

Conversation

@zoltan-dulac
Copy link

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 2 commits January 3, 2012 17:18
…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.
@LeaVerou
Copy link
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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants