I’m updating my app from v5 to v7 Vue, and am having several issues with routing and the navbar. I’ll focus on one particular issue first: On one particular page the navbar is unresponsive. The DOM shows that this page not being marked with page-current class; the previous page is still marked current. And its page:afterin event is not getting called. Stepping through the debugger, it shows that the router animation function code calls animationEnd on the page element, but the callback is never received:
(direction === 'forward' ? $newPageEl : $oldPageEl).animationEnd(() => {
onDone();
}); // Animate
It doesn’t happen on all pages. This issue happens on one particular page, but there are other navbar issues on other pages, such as the navbar disappearing after navigation sometimes.
This only happens when emulating iOS in Chrome, but when emulating Android, it works fine. So it seems like an iOS-specific animation setting?
What might be a reason for that?
If route animation is turned off, it works fine. But it’s not a pleasant user experience.