Flexbox column width does not collapse in Safari when using transition-group

[bulkan]

Version

2.5.13

Reproduction link

https://jsfiddle.net/bulkan/57xsxcph/26/

Steps to reproduce

• Go to the JSFiddle link
• Click on the remove button until all of the children is removed from the second column

What is expected?

In Chrome and Firefox, the second columns width will collapse once all of its children is removed. The other columns will also animate.

This is what I expect to occur in Safari.

What is actually happening?

In Safari the second column width remains the same until a repaint occurs.

---

I ran into this issue whilst testing my work in Mobile Safari. I was able to reproduce the issue on desktop Safari (High Sierra 10.13.1 & Safari 11.0.1)

I have also created another JSFiddle in which I'm not using Vue and the column width collapses.

[tonytamps]

Issue goes away if you remove - I suspect it's actually a safari bug?

.list-leave-active {
  position: absolute;
}

[posva]

Looks like a Safari bug. Seems to happen when adding a position: absolute through a class (and sometimes through a style) before removing an element: https://jsfiddle.net/y7yu361b/ (no vue). Feel free to use that fiddle to report the bug in safari 🙂

edit: I tried to find a workaround using @leave and setting the position to absolute there but that also triggers the bug, so you have to find a more complex workaround until safari fixes that bug

[bulkan]

Thank you @posva I've submitted a bug with Safari.