Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

yyx990803commented, Apr 17, 2018

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

1reaction

sqalcommented, Aug 10, 2016

@posva But it works in 2.0 though

http://jsfiddle.net/xt3kabtr/

Top Results From Across the Web

CSS Flexbox Inspector: Examine Flexbox layouts

The Flexbox Inspector allows you to examine CSS Flexbox Layouts using the Firefox DevTools, which is useful for discovering flex containers on a...

During animation, the CSS visibility is improperly inherited by ...

During animation, the CSS visibility is improperly inherited by children (since Firefox 60). Summary: During animation, the CSS visibility is improperly ...

content-visibility - CSS: Cascading Style Sheets | MDN

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of ...

Animations / transitions of opacity and visibility together are ...

Created a banner animation consisting of a stage with elements that have many different animations like fade in, fade out. Until firefox 74...

Relationship of flexbox to other layout methods - CSS

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very...