Issue with jQuery's outerWidth() setter, padding and box-sizing at some zoom levels

[Spiff]

The problem happens when I try to set the same outerWidth() value on 2 divs with box-sizing: border-box with one having a padding while the other does not and the browser zoom is set with "not round" values (e.g. 67% or 33% on chrome and almost every one on safari). The size is the same except at these levels where the one with the padding is smaller than the other one.

here is an example of the problem : ​http://jsfiddle.net/ARMMB/6/

You have to run the example after setting the zoom to these levels.

I discovered this issue on jquery 1.8.3 and it is still there in the latest version.

[m_gol]

I experimented a bit with that case and it seems that it's caused by failing jQuery.support.boxSizing test in WebKit when zoom is set to sth different than 1 on body (but still, not in all cases). If it's set on anything below body, the code works fine.

I created a patch setting zoom on body to "1" at the beginning of tests firing on document ready and restoring it afterwards:
​https://github.com/jquery/jquery/pull/1194

[m_gol]

BTW, this probably means that zoom support in WebKit is seriously broken, it shouldn't affect width at all. I'd advise against using that, especially that this property is not supported at all by Firefox (and probably Opera) and I'd advise to use the cross-browser transform: scale() instead.

[mikesherov]

Yeah, zoom is seriously broken in webkit. ​http://bugs.jquery.com/ticket/13543

[m_gol]

I suppose you meant this link, @mikesherov:
​https://bugs.webkit.org/show_bug.cgi?id=105979

[Michał Gołębiowski]

Fix #13543. offsetWidth is wrong on non-1 zoom. Close gh-1194.

Changeset: 8db7d6f20b4226994e88d1cd9243743c492773f5