Unable to detect whether user reached the bottom of the page in Chrome

Question

I need to detect whether user reached the bottom of the page.

The following code taken from here doesn't work in Chrome with the scale different than 100% (alert window does not pop up):

function bottomReached() {
  return $(window).scrollTop() == $(document).height() - $(window).height();
}

$(function() {
  $(window).scroll(function() {
    if (bottomReached()) {
      alert('Bottom reached');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>
<h2>Scroll?</h2>
</br>

It works as expected in Firefox though.

Why? What am I doing wrong? How can I fix it?