Vue: Leave animation randomly makes leaving element flicker on IE11

[sztrzask]

Keyword "randomly".

in transition code:

 /**
   * The "cleanup" phase of a leaving transition.
   */

  p$1.leaveDone = function () {
    this.left = true;
    this.cancel = this.pendingJsCb = null;
    this.op();
    removeClass(this.el, this.leaveClass);
    this.callHook('afterLeave');
    if (this.cb) this.cb();
    this.op = null;  
  };

The flicker I'm randomly experiencing is the element returning to normal state when leave class is removed, just before the element is removed from DOM.

Moving the removeClass(this.el....) to next tick seems to resolve the flickering.

[yyx990803]

this.op() is the line which actually removes the element, so the class should be removed after the element is removed. Not sure if this is a bug in IE11 or not. If possible please provide a repro.

[sztrzask]

I'l try to record it on video as it happens randomly and provide you a simplified repro on monday, but from what I saw I think its a bug on IE where after removing the class the layout refreshed for some reason before removing the element from DOM.

[sztrzask]

We've managed to capture the flicker on video happening on IE Mobile (IE11 Update for Windows Phone 8.1):
20160215_165900.zip

Here's a simplified repro: http://codepen.io/sztrzask/pen/MKxZvO

It really does seem like IE bug.

Delaying the cleanup phase seems to work around it (with appropriate guards in case elements were removed).

[smolinari]

It really does seem like IE bug.

No surprise there.

Scott

[yyx990803]

@sztrzask

Moving the removeClass(this.el....) to next tick seems to resolve the flickering.

Are you using Vue's nextTick or just a setTimeout?

[sztrzask]

Vue's nextTick with guard checking if element still exists in next tick.

[yyx990803]

@sztrzask any reason why the existence guard check is necessary? I'm just thinking whether adding a nextTick to leaveDone would make this work.

[sztrzask]

After a moment of consideration, I belive it's not necessary :)

[yyx990803]

Ok, I found a simpler solution: add animation-fill-mode: forwards; to your transitioned element. This ensures the animation ending state stays even when the class is removed, and doesn't require Vue to change its behavior to cater to an IE bug :)

[sztrzask]

The proposed fix works partially. The flicker is less likely to appear, but it's still happening.

[kalvn]

The fix worked well on my side, thanks :)