Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ScrollTrigger Invalid calling object error in IE #412

Closed
mrwokkel opened this issue Aug 24, 2020 · 7 comments
Closed

ScrollTrigger Invalid calling object error in IE #412

mrwokkel opened this issue Aug 24, 2020 · 7 comments

Comments

@mrwokkel
Copy link

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
Copy link
Author

mrwokkel commented Aug 24, 2020 •
edited
Loading

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
Copy link
Member

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
Copy link
Member

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

@mrwokkel
Copy link
Author

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
Copy link
Author

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 vuejs/vue#4465 (comment)

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
Copy link
Member

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
Copy link
Author

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);

@ivodolenc ivodolenc mentioned this issue Jun 21, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mrwokkel @jackdoyle @ZachSaucier