8

Question: Is there a scenario where getBoundingClientRect and window.getComputedStyle would differ in width or height?

I just found a inconsistent width (see under) in IE when a element has box-sizing where window.getComputedStyle returns the wrong value.

So I thought about overriding just width and height with values from getBoundingClientRect but not sure if there are cases where that would fail.

Example of the problem (broken in IE): http://jsfiddle.net/bwPM8/

var box = document.querySelector('.box');
var gBCR_width = box.getBoundingClientRect().width; // always 200
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE
Marcin Nabiałek
  • 109,655
  • 42
  • 258
  • 291
Rikard
  • 7,485
  • 11
  • 55
  • 92
  • I havent looked at IE for a long time but IE in `getComputedStyle` seems to calculate padding and border inside the box while other browsers calculate it outside. `200px - (10+10 border) - (10+10 padding) = 160px` – erosman Jul 10 '14 at 09:02
  • @erosman, thanks for feedback. Yes, IE calculates in its own way. Do you know the answer to the question I wrote in the first line? – Rikard Jul 10 '14 at 09:06
  • Sorry, I dont (not exactly) but ... `getComputedStyle()` get its data from CSS so the data is hard-coded in the CSS. `getBoundingClientRect()` is a text rectangle object that encloses a group of text rectangles. In other words, it seems that its gets its data from the rendering of the object. The difference, comes from the [CSS Box Model](http://www.w3schools.com/css/css_boxmodel.asp) and as it says in that page: _"IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a to the HTML page."_ – erosman Jul 10 '14 at 11:19

2 Answers2

5

Yes, there are several differences between these two functions.

getBoundingClientRect() will return a text rectangle object that encloses a group of text rectangles (the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element). The latter, getComputedStyle(), will return the computed CSS style of that element, after applying all CSS.

Therefore the resulting width and height can be drastically different.

For instance, by simply applying a transform to that element you already change the width that is returned by getBoundingClientRect():

http://jsfiddle.net/epW3c/

Moreover, even if you add a border or padding to your element, the width and height will be different in both cases.

Depending on the version of IE you're testing this on, you might be experiencing the infamous Internet Explorer box model bug which causes the interpretation of the dimensions of the element to be wrong. Make sure you're not running your page in quirks mode by adding the doctype properly.

MMM
  • 7,221
  • 2
  • 24
  • 42
5

In IE the CSS padding: 10px; cause overflow and that gives you extra size of the computedStyle..

Also IE calculates Borders separately from the object.

This sums up the answer with difference of 40px

Now with overflow:hidden; OR box-sizing: border-box; that cause value go in minus so will become 200px - 40px = 160px.

Note: Here if we remove overflow:hidden will not make any difference as the box-sizing:border-box cause the design not to grow further from defined height and width.

I have generate another fiddle 1 (without padding) which gives

'computedValue : 180px'

And with Border:0px the fiddle 2 give results same as in other browser..

I hope this clears what causes what in IE(IE has its own mind that sometimes cause pain to developers)

MarmiK
  • 5,639
  • 6
  • 40
  • 49