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.

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

Leave animation randomly makes leaving element flicker on IE11 #2338

Closed
sztrzask opened this Issue Feb 9, 2016 · 11 comments

Comments

Projects
None yet
4 participants
@sztrzask
Copy link

sztrzask commented Feb 9, 2016

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 comment has been minimized.

Copy link
Member

yyx990803 commented Feb 11, 2016

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

This comment has been minimized.

Copy link

sztrzask commented Feb 11, 2016

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

This comment has been minimized.

Copy link

sztrzask commented Feb 16, 2016

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

This comment has been minimized.

Copy link

smolinari commented Feb 16, 2016

It really does seem like IE bug.

No surprise there.

Scott

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Feb 26, 2016

@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

This comment has been minimized.

Copy link

sztrzask commented Feb 26, 2016

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

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Feb 26, 2016

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

@yyx990803 yyx990803 removed the need repro label Feb 26, 2016

@sztrzask

This comment has been minimized.

Copy link

sztrzask commented Feb 26, 2016

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

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Feb 27, 2016

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

@yyx990803 yyx990803 closed this Feb 27, 2016

@sztrzask

This comment has been minimized.

Copy link

sztrzask commented Mar 1, 2016

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

@kalvn

This comment has been minimized.

Copy link

kalvn commented Nov 9, 2018

The fix worked well on my side, thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment