CSSTransitionGroup enter transitions do not work in iOS8 (Safari and chrome)

[sbrandwoo]

Best explained with a demo: http://jsbin.com/pinasi/2/ - Hit "Go" a few times, the new numbered boxes should fly in from the left, and the old numbers boxes fly out to the right.

On iOS8, the leave transitions are working fine, but the enter transitions are not activated, the new numbers simply appear in place. Affects iOS8 Chrome and Safari on both an iPad Air and an iPhone 6.

CSS Animations on a whole look to work fine.

[waldreiter]

In the newest Safari on OSX enter transitions are broken too.

If no one has a real fix for this, then I would suggest taking @deadlyicon's PR #2099.

[WickyNilliams]

Can also confirm this is broken in Safari 7.1 on OSX. Here's another test case http://jsfiddle.net/pruNn/8/. Only entry animations are affected.

Edit: Seems that @cody/@deadlyicon's suggestion works - moving transition declaration to enter-active fixes the entry animation as seen here: http://jsfiddle.net/pruNn/9/

[gaearon]

Indeed, moving transition to enter-active worked. I wonder if this breaks it somewhere else?

[torarnek]

Another example of CSSTransitionGroup (-leave-active) not working in Safari 8 on OSX:
http://jsfiddle.net/z8c58sc9/2/

[rhobot]

Safari for Desktop and iOS has several issues in css transition in the first place. Has anyone found whether this react animation specific issue or safari issue?

[gaearon]

@rhobot

I think it's caused by a change (bug?) in recent version of CoreAnimation that Safari uses under the hood.

As @WickyNilliams said above, you can fix it by moving transition declaration to -leave-active. This fiddle works on Safari 8, as well as older browsers.

[sophiebits]

Closing in favor of #2104 as these sound pretty similar.