Search code examples
javascriptdomcross-browsergetboundingclientrect

Browser support of width and height properties of getBoundingClientRect?

I just discovered and really like getBoundingClientRect because it includes sub-pixel precision. This has allowed me to create consistent alignment, even if the user types Ctrl+ or Ctrl+-.

It has properties top, bottom, left, right, & width & height.

It is simple to find the browser support on the internet, but not so much for the the width and height properties in particular. It appears that this was added after the fact. It works in Firefox, Chrome, and IE10, but what about IE8 & IE9? I can't test these conveniently.

Solution

  • In IE9 as IE8:

    document.body.getBoundingClientRect() 
[object] {
    right : 2556,
    top : 0,
    bottom : 1195,
    left : 0
}

    In IE9 as IE9:

    document.body.getBoundingClientRect() 
[object ClientRect] {
    bottom : 1435,
    height : 1435,
    left : 0,
    right : 2544,
    top : 0,
    width : 2544
}

    So, I'd say yes on IE9, no on IE8...