getBoundingClientRect()
returns the coordinates of an element on the screen after being transformed. How do I calculate those coordinates before being transformed? i.e. without transforms.
The simplest way I found was:
element.style.transform = 'none'; //temporarily reset the transform
var untransformedOffset = element.getBoundingClientRect().top; //get the value
element.style.transform = ''; //set it back
but that causes slow layout thrashing, especially noticeable if done on many elements. Live demo: http://jsbin.com/nibiqogosa/1/edit?js,console,output
Is there a better way?
That javascript code can be applied to:
<div id="element"></div>
<style> #element { transform: translateY(20px); }</style>
And the result will be 0 (excluding the page's margin)
The result of element.getBoundingClientRect().top
will be 20 (excluding the page's margin)
Edit: Answers roundup
http://jsbin.com/kimaxojufe/1/edit?css,js,console,output
See Question&Answers more detail:os