getBoundingClientRect is empty in mobile
<p>I have a site with angular functionality. I've tracked a bug down to the getBoundingClientRect method. It's properties are empty on mobile devices (the app works fine on laptops, etc....</p>

<p>This code:</p>

<pre><code>var message = JSON.stringify(element.getBoundingClientRect());
alert(message);
</code></pre>

<p>sends the following alert on my MacBook:</p>

<p>{"top":164,"right":601,"bottom":468,"left":328,"width":273,"height":304}</p>

<p>and on my iPad: </p>

<p>{}</p>

<p>Why, and is there a fix, or should I start rewriting the JS?</p>

<p>More of the code:</p>

<p>Element stored in var:</p>

<pre><code>var element = document.querySelectorAll(selector)[0];
</code></pre>

<p>Event added:</p>

<pre><code>element.addEventListener('touchmove', function(e) {
            getMouseCoordinates(e, element);
    });
</code></pre>

<p>Event:</p>

<pre><code>function getMouseCoordinates(e, element) {
var x = e.clientX - element.getBoundingClientRect().left,
        y = e.clientY - element.getBoundingClientRect().top;
var message = JSON.stringify(element.getBoundingClientRect());
        alert(message);
    var  shiftX = x - mouseX; ** code was stopping here
</code></pre>

<p>I've discovered, further, that the ClientRect Object has properties before the Event Listener was assigned (so the same bit of "var message = " code posts a full "{ 'top': ... }" object in mobile browsers outside of the event listener handler, but not in that function).</p>