title: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined on Rails app
body: <p>I get the following error on each page of my Rails website when I'm clicking anywhere on the page:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined</p>
  </blockquote>
  
  <p>In the Chrome console, the bug appears on line 3 of this function (which is not mine) :</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).on('click', 'body', function(e) {
    var tabs = $('#tabs');
    var width = Math.round(tabs[0].getBoundingClientRect().width);
    if (tabs.css('left') == '0px') {
      if (e.pageX &gt; width &amp;&amp; e.pageY &gt; 60) {
        if (animationDone == true) {
          animationDone = false;
          tabs.animate({
            left: "-=" + width
          }, 400, function() {
            animationDone = true;
          });
        }
      }
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OpWwb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OpWwb.png" alt="The console error"></a></p>
  
  <p>Do you have any idea what may be causing this bug? I commented all my JS which doesn't seem to cause this error.</p>