{"action":"opened","issue":{"url":"https://api.github.com/repos/jquery/jquery/issues/3808","repository_url":"https://api.github.com/repos/jquery/jquery","labels_url":"https://api.github.com/repos/jquery/jquery/issues/3808/labels{/name}","comments_url":"https://api.github.com/repos/jquery/jquery/issues/3808/comments","events_url":"https://api.github.com/repos/jquery/jquery/issues/3808/events","html_url":"https://github.com/jquery/jquery/issues/3808","id":262805579,"number":3808,"title":"css() reports wrong width/height in Chrome on certain zoom levels","user":{"login":"bschwarzent","id":8881838,"avatar_url":"https://avatars0.githubusercontent.com/u/8881838?v=4","gravatar_id":"","url":"https://api.github.com/users/bschwarzent","html_url":"https://github.com/bschwarzent","followers_url":"https://api.github.com/users/bschwarzent/followers","following_url":"https://api.github.com/users/bschwarzent/following{/other_user}","gists_url":"https://api.github.com/users/bschwarzent/gists{/gist_id}","starred_url":"https://api.github.com/users/bschwarzent/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bschwarzent/subscriptions","organizations_url":"https://api.github.com/users/bschwarzent/orgs","repos_url":"https://api.github.com/users/bschwarzent/repos","events_url":"https://api.github.com/users/bschwarzent/events{/privacy}","received_events_url":"https://api.github.com/users/bschwarzent/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-10-04T14:20:40Z","updated_at":"2017-10-04T14:20:40Z","closed_at":null,"author_association":"NONE","body":"jQuery 3.2.1 reports wrong sizes for elements with `box-sizing: border-box` in Chrome (v61) on certain browser zoom levels. It seems to add the element's insets (padding + border) to its width and height, although the CSS width already includes the insets.\r\n\r\n### Demonstration ###\r\nhttp://output.jsbin.com/yipudeloya/\r\n\r\nIn the provided test case, we have two \\<div>s with 10px padding on all sides, 1px border on all sides and a CSS width/height set to 32px. Because box-sizing is set to `border-box`, the visual size of the elements is 32x32px with a remaining \"inner\" space of 10px. At 100% browser zoom level, this is correctly reported both by `css('width')` and `.outerWidth()`.\r\n\r\nIf we now zoom to 110%, the numbers get slightly changed, probably due to some rounding errors (31.9886px instead of 32px). Because we should always get \"CSS pixels\" that are not affected by browser zoom, I would have expected those numbers to stay the same - but I can live with that. The real problem occurs when you reload the page while having the browser zoom at 110%! Now the width is completely incorrect (53.977236000000005px instead of 32px).\r\n\r\nIf the page uses those values for programmatic layout, the results will be wrong. You can see the effect in the demo. The CSS width and height of the first \\<div> are copied to the second, so they should always be the same size. However, if you start at 100%, the second \\<div> is much larger.\r\n\r\n### Analysis ###\r\nAnalysis has shown that this seems to be caused by the internal function `computeStyleTests()` in *css/support.js* that wrongly sets the internal property `boxSizingReliableVal` to `false`. Apparently, this happens because of a rounding error. In my case, the test div's measured width is 3.997px, which is not equal to the expected value of 4px. What's worse, this internal property is only calculated once! So when you start at 110% zoom, and then reset it to 100%, the problem still persists until you completely reload the page.\r\n\r\nI could observe the problem at the following zoom levels: 110%, 90%, 80%, 67% and 33%.\r\n\r\nFirefox (v56) and IE (v11) don't seem to be affected by this problem. Also, with jQuery 2.1.4, everything works fine on all browsers. All tests were performed on Windows 7 with default DPI and font size settings.\r\n"}}
{"actor":{"display_login":"bschwarzent"}}