Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 416
700 Software Avatar asked Jul 16 '13 19:07

700 Software


People also ask

What is getBoundingClientRect () in Javascript?

The getBoundingClientRect() method returns the size of an element and its position relative to the viewport. The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.

What is getBoundingClientRect () Top?

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

Does getBoundingClientRect work on mobile?

It is reliably supported on all desktop and mobile browsers, with the exclusion of the x and y values which is unstable in older versions of Internet Explorer/Edge and Safari.

Is getBoundingClientRect slow?

Call getBoundingClientRect() It's relatively fast when you have a small number of elements. But it's getting to be slower and forcing a reflow when the number of elements starts to rise dramatically, or when calling multiple time.


1 Answers

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...

like image 102
dandavis Avatar answered Oct 09 '22 17:10

dandavis