[Vuejs]-Vuejs css transition not working on mobile chrome

by

0👍

Take this for what it’s worth, but after replicating the issue in codepen with a simple slower animation that works and simple faster one that doesn’t, I was able to fix this by killing the Chrome app on iOS and restarting it 🤦🏻‍♂️

https://codepen.io/definitelynotamachine/pen/JjrxZYj

// SLOW TRANSITION

.crossfade-1-enter,
.crossfade-1-leave-to {
  opacity: 0;
}

.crossfade-1-leave-active,
.crossfade-1-enter-active {
  transition: opacity 1500ms;
}

// FAST TRANSITION

.crossfade-2-enter,
.crossfade-2-leave-to {
  opacity: 0;
}

.crossfade-2-leave-active,
.crossfade-2-enter-active {
  transition: opacity 1000ms;
}

My first clue was the official Vue transition doc page not showing working transitions, either.

0👍

This has been a bug in iOS Chrome running on (IIRC) iOS 14.3 or later. It seems to remain unaddressed after two years. I suggest opening a ticket using “Report an Issue” from the Chrome menu if this is impacting you.

Leave a comment