CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorergetboundingclientrect
thelittlegumnut
thelittlegumnut

Reputation: 307

jQuery in IE11 - Difference between $(document).width() and $("html").width()

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.

Upvotes: 2

Views: 939

Answers (1)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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)

Upvotes: 2

Related Questions