Vue.js version

1.0.28

Reproduction Link

I've identified what is needed to fix the bug and I think, by inspection, it is the right thing to do. Producing a fiddle to reproduce this is somewhat complex and seems out of proportion to the fix, however if I absolutely have to then I will.

Steps to reproduce

Where there is an app with dynamic elements with transitions defined with callback hooks on the transitions, open it in IE (tested in 11 and 9,10 through emulation. No problem in other browsers)

What is Expected?

The transition completes with the hooks called at the right times.

What is actually happening?

The transition does not complete and an error is thrown in Vue: "Invalid calling object" on this code (which starts on line 37 src/transition.js, the error is thrown on line 40):

const raf = inBrowser && window.requestAnimationFrame
const waitForTransitionStart = raf
  /* istanbul ignore next */
  ? function (fn) { raf(function () { raf(fn) }) } //<-- error thrown here!
  : function (fn) { setTimeout(fn, 50) }

The error seems to be because the requestAnimationFrame method of the window object is being called without its parent object.

What seems to fix it?

By changing line 37 to

const raf = inBrowser && window.requestAnimationFrame.bind(window)

the error goes away. Using bind seems, to me, obviously correct. Clealy in other browsers because the default this is the window object anyway it should not matter, however IE seems to take a dislike to this approach and throw the error. Binding window to the method would seem harmless otherwise.

I'm an old-hand at coding but new to github (and relatively new to JS and vue) - The fix works but I don't really know if there are other reasons why this is not a good idea so I'm cautious about just closing it.