ScrollTrigger Invalid calling object error in IE

mrwokkel commented 4 years ago

When using ScrollTrigger I get multiple "Invalid calling object" errors. Traced it down and IE does not allow to create the following function alias _raf = _win.requestAnimationFrame

I Changed the following to remove the error:

In ScrollTrigger.register I changed this

          _raf = _win.requestAnimationFrame || function (f) {
            return setTimeout(f, 16);
          };

to this:

          _raf = function (f) {
            return _win.requestAnimationFrame ? _win.requestAnimationFrame(f) : setTimeout(f, 16);
          }

I'm sorry if I have not followed correct procedures to raise issue. (Time not on my side)

Hope it helps.

Cheers, John

mrwokkel commented 4 years ago

Addendum: source file of ScrollTrigger the line changed is:

_raf = _win.requestAnimationFrame || (f => setTimeout(f, 16));

to

_raf = f => (_win.requestAnimationFrame ? _win.requestAnimationFrame(f) : setTimeout(f, 16));

There is no description on how to build.

jackdoyle commented 4 years ago

Hm, I cannot reproduce that problem at all, and it doesn't really make sense to me. Are you saying that in your version of IE, requestAnimationFrame exists...but it's not a function or something? Do you have some other library that's messing with the default browser behavior maybe? I've tried in IE11, 10, and 9. Zero such errors. Can you tell us more about exactly how to reproduce this problem? Nobody else has reported anything similar either, and I know folks have used it in IE so I wonder if it's something specific to your environment(?)

I wouldn't want to change the code to what you suggested because it adds a conditional check on EVERY SINGLE TICK (performance bummer).

ZachSaucier commented 4 years ago

I can't reproduce this either. A minimal demo would be greatly helpful @mrwokkel.

mrwokkel commented 4 years ago

I stand corrected, following code works in IE11.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>IE11 function alias test</title>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(event) {
        var _raf = window.requestAnimationFrame || function(f) { return setTimeout(f, 16) };

        var test = function() { console.log('hello world') }

        _raf(test);
      });
    </script>
  </head>
  <body>
    <p>Check console</p>
  </body>
</html>

Please disregard for now. I have to dig deeper. If it has something to do with gsap I let you know. Sorry for your time.

mrwokkel commented 4 years ago

Found it!

First the example:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>IE11 Invalid calling object</title>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(event) {
        eval('"use strict";var _raf=window.requestAnimationFrame;_raf(function(){})');
      });
    </script>
  </head>
  <body>
    <p>Check console in IE11</p>
  </body>
</html>

Seems it has something to do with webpack running in hot reload mode (eval). (I am running via webpack) Found a trail via this https://github.com/vuejs/vue/issues/4465#issuecomment-272926333

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Following that logic (and if you want to support webpack hot reload in IE in strict mode), the change in code should be: From: _raf = _win.requestAnimationFrame || (f => setTimeout(f, 16)); To: _raf = _win.requestAnimationFrame.bind(_win) || (f => setTimeout(f, 16));

Above change works for me, but if I have to provide a test (webpack + hot reload) it will take me some time. I don't know about the performance impact of this change though.

I hope it helps

jackdoyle commented 4 years ago

Thanks for the info. Yeah, I'm reluctant to add that to the official codebase, as I'm not sure how many unintended consequences it'd have (GSAP is used by massive amounts of devices on various browsers, some of which may not even support .bind()). Would an easy fix in your situation be to just do the binding on your own before GSAP loads? Like:

window.requestAnimationFrame.bind(window);

mrwokkel commented 4 years ago

I can imagine the reluctance and it is only an issue during development using webpack. But for those poor souls (like me) who do have to support IE11, this is what worked:

window.requestAnimationFrame = window.requestAnimationFrame.bind(window);
gsap.registerPlugin(ScrollTrigger);

greensock / GSAP

ScrollTrigger Invalid calling object error in IE #412