IE11 issue

[langdonx]

After some troubleshooting, I really have no explanation for this, but wanted to file the issue anyway in case someone else had the same trouble.

In IE11 only (Chrome/Firefox are fine) I noticed that the parallax images were hidden until the page was scrolled down further than where they should have appeared.

In troubleshooting, I found that in render(), parallax.winHeight was always zero, skewing the math. Further troubleshooting revealed that while the setup function was being called, $(win).on('load') would never execute due to some order of operations issue(?) in IE.

I moved the majority of the code (the event binding) from setup() to the Constructor and things started working again.

I added additional logging to try and further reduce what was happening, which led me to assume the order of things differs from Chrome to IE11.

Chrome/Firefox/Opera:

• Constructor is called
• setup() is called
• $(window).on('load') from the Constructor is fired
• $(window).on('load') from setup() is fired

IE11:

• Constructor is called
• $(window).on('load') from the Constructor is fired
• setup() is called

IE11 never fires the load events from setup().

It's strange because your demo site works fine and I have yet to figure out how my site differs.

I'll update when my site is live to provide an example. For now, I've just moved the load logic to the Constructor.

[langdonx]

I made a more efficient hack-fix by extrapolating those callbacks in setup() into functions and calling them both binding. It will do double work in in anything but IE.

$win
    .on('scroll.px.parallax load.px.parallax', scroll)
    .on('resize.px.parallax load.px.parallax', resize);

scroll();
resize();

[bradsobie]

Having the same issue. When scrolled to top of page on IE11, the images have visibility: hidden. Once you scroll 1 pixel it gets visibility: visible.

[nckblu]

Building on what langdonx said about the double work, you can use a detect ie function like so:

       /**
         * detect IE
         * returns version of IE or false, if browser is not Internet Explorer
         */
        function detectIE() {
            var ua = window.navigator.userAgent;

            var msie = ua.indexOf('MSIE ');
            if (msie > 0) {
                // IE 10 or older => return version number
                return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
            }

            var trident = ua.indexOf('Trident/');
            if (trident > 0) {
                // IE 11 => return version number
                var rv = ua.indexOf('rv:');
                return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
            }

            var edge = ua.indexOf('Edge/');
            if (edge > 0) {
                // IE 12 => return version number
                return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
            }

            // other browser
            return false;
        }


        var $doc = $(document),
            $win = $(window);

        $win.on('resize.px.parallax load.px.parallax', resize)
            .on('scroll.px.parallax load.px.parallax', scrollIt);


        if (detectIE()) {
            resize();
            scrollIt();
        }

[iantic]

I have exactly the same problem, but I don't know where to put the code :(

Please help.

[wstoettinger]

i'm closing this issue due to inactivity assuming it has been solved in recent versions of the library and/or the browser.