Progressbar: Inaccurate width of value bar when box-sizing:border-box; is in use

[kpturner]

As described above, when box-sizing:border-box; is in use then changes to a progress bar value is not accurately reflected in the widget. For example, a standard progress bar set to 50% will actually show a bar that is greater than 50% wide. In some instances the difference can be quite large and noticeable. The suggested fix may be to set the width using .outerWidth() rather than .width()

Here is a jsFiddle: ​http://jsfiddle.net/kpturner/EkvJw/

[tj.vantoll]

Updated the test case to be against master: ​http://jsfiddle.net/tj_vantoll/5F87q/ and confirmed that that it only occurs when box-sizing: border-box; is used.

This is strange. I've stepped into the code and for this test case and we're attempting to set a width of "50%" here: ​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.progressbar.js#L119. Yet, a width of {{{"52%"}}] gets set on the element instead. This might be a core bug but I'm having trouble figuring out exactly what's up here.

[Scott González]

.width() respects box-sizing in newer jQuery releases, so .width() and .css( "width" ) can now behave differently. .outerWidth() is the correct thing to use. This will continue to crop up in various places for a while ;-)

[k_borchers]

I think this may actually be on its way to being fixed with latest core. I changed the fiddle to pull from our CDN which seems to be different (newer) than what jsFiddle calls "Edge". Then I changed the fiddle to wait for the dom to be ready and now the value is correct. ​http://jsfiddle.net/5F87q/3/ It's also correct if you remove the box-sizing ​http://jsfiddle.net/5F87q/4/

I believe this is related to ​http://bugs.jquery.com/ticket/14084 so I think when that is fixed, this should be fixed.

[Scott González]

In that case, I'd like to just close this as won't fix, because I don't ever want to work around box sizing issues in UI.

[Scott González]

Hmm...no, this is still wrong. We always have to use .outerWidth() as I mentioned earlier. Also, I'm still seeing 52% using jquery-git2.

[Scott González]

Ah, it was the DOM ready change in your fiddle that made it work. Note that there are 2 edge versions (1.x and 2.x), they both work properly when waiting for the DOM to be ready. So there is a bug here, but it's not related to box-sizing (at least not with respect to jQuery UI).