Vue: Absolutely-positioned flexbox child component with transition is duplicated in DOM when visibility is toggled via v-if in Firefox

[decademoon]

Vue 1.0.26
Firefox 47.0

Reproduction Link

http://jsfiddle.net/5sH6A/523/

Info

• Click the button to toggle the visibility of the <test> component.
• The entrance transition works, but the leave transition doesn't, causing the element to remain in the DOM indefinitely.
• Clicking the button multiple times results in multiple <test> components in the DOM.

The following things must be present for the bug to occur:

• It must be a component instance with visibility toggled via v-if.
• It must be a flexbox child.
• It must be positioned absolutely.
• It must have a transition.
• Vue.config.debug must be false.

[dariuszsikorski]

[side note] Checked on chrome 51 and even clicking toggle like crazy does not reproduce the reported problem, appears only for Firefox.

[posva]

This looks like a Firefox bug to me: It doesn't seem to support absolute positioning inside a display: flex container. The animation is indeed messed up on Firefox 😕 and I think that's making impossible for Vue to listen for css transition events

[sqal]

@posva But it works in 2.0 though

http://jsfiddle.net/xt3kabtr/

[decademoon]

If Vue.config.debug is true then the bug doesn't occur. I dunno if that helps.

[posva]

For the record What is happening here is that the transition is referring to the adjacent empty text node when debug is false and cannot remove the component. With debug = true it refers to the comment node and is somehow able to remove the component.

[AKST]

Is this fixed in a 1.x branch at all? I'm working on a project that hasn't been able to upgrade yet.

If the only known workaround is setting Vue.config.debug to true, what are the implications of this?

[yyx990803]

Closing 1.x issues as 1.x is now end of life and will only receive critical security patches.