Lazy loading occasionally doesn't work in angular

Question

I am encountering some strange behavior for the following code.

    function linkFunc(scope, element, attribute) {
        var page = angular.element($window);

        page.bind('scroll', function() {

            var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
            var body = document.body, html = document.documentElement;
            var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
            var windowBottom = windowHeight + window.pageYOffset;

            if (windowBottom >= docHeight) {
                scope.$apply(attribute.myDirective);
            }
        });
    }

The above is a piece of code that detects if the bottom of the page is reached, if its reached it will call whatever function bind to myDirective

The main issue is that most of the time the lazy loading works, and myDirective gets sucessfully called. However some of the times the lazy loading won't work, and I wasn't able to reproduce the bug.

I tried different screen size, different browser, but it seems like the bug just happens randomly.

Maybe someone have this happened to them before, and can point me a direction?

Edit:

More information

I was able to reproduce the bug after a bit of experimenting.

Basically, when the zoom in percentage of the browser is < 100 % , window.pageY returns a decimal value that is slightly inaccurate which cause windowBottom to be off by a 0.1 to 0.9

eg.

            console.log(windowBottom); // 1646.7747712336175
            console.log(docHeight);    // 1647

Does anyone know why this happens?

Edit 2:

The above behavior is also non deterministic, but the decimal part is true.

Answer 1

0.1 + 0.2 !== 0.3

This one is an oddity not just in JavaScript; it’s actually a prevailing problem in computer science, and it affects many languages. The output of this is 0.30000000000000004.

This has to do with an issue called machine precision. When JavaScript tries to execute the line above, it converts the values to their binary equivalents. This is where the problem starts. 0.1 is not really 0.1 but rather its binary equivalent, which is a near-ish (but not identical) value. In essence, as soon as you write the values, they are doomed to lose their precision. You might have just wanted two simple decimals, but what you get, as Chris Pine notes, is binary floating-point arithmetic. Sort of like wanting your text translated into Russian but getting Belorussian. Similar, but not the same.

You can read more here. Without digging into browser source, I would guess that your problem stems from this.