So I have this in IE11...
ROUNDED UP (I think...)
console.log($(document).width()); // 808px;
NOT ROUNDED
console.log($("html")[0].getBoundingClientRect().width); // 807.30993px;
ROUNDED DOWN (or to nearest integer)
console.log($("html").width()); //807px;
So apparently, either $(document) and $("html") are the same, and jQuery is rounding the html element down instead of up like the browser. Or IE11 gives the $(document) some extra room, boosting the amount of pixels HIGHER than html?
I thought html was supposed to represent the whole document?
MY QUESTION:
Should they be the same width? Like in Firefox, Chrome, etc.
Here is an answer to a similar question: In JavaScript, the document keyword is a handle on the object that contains the HTMLDocument. So they are not the same, document is an object , which also contains html for the page.
Now when you get the width from the html and document.
console.log($("html").width());
gives you the width of the html.
and console.log($(document).width());
gives you the width of visible part of the document, so apperently width of <html> itself, but there is a difference , if you have applied a margin to html, then the width of document is a sum of width of html and the margin applied to it.
See this example http://jsfiddle.net/bbke9n59/
<div style='background:red;height:30px;'></div>
html{
margin:20px;
}
here, in my browser i get,
console.log('html='+$("html").width()); // width 630
console.log('document='+$(document).width());// width 670
Exactly, 40px difference in the width, thats only the margin applied to the html
Now this was all about chrome and firefox,
About IE
IE-9 when I run the same page on IE-9
console.log('html='+$("html").width()); // width 570
console.log('document='+$(document).width());// width 570
No difference in width of html and document( there should have been really)
IE-11 when I run the same page on IE-11
console.log('html='+$("html").width()); // width 517
console.log('document='+$(document).width());// width 557
Exact difference of 40. just as chrome and firefox showed.
So I am no longer able to reproduce the problem of rounding( in any of the browsers), so for me, I guess the problem is not with the rounding up using jquery(if that was the problem then jquery would have rounded up the width for document and html both, and still make them same width)