Page events not always getting called since updating from v5 to v8

Since updating framework7 from v5 to v8, we’re seeing that page events (@page:beforein, @pageafterin, @page:beforeout, @page:afterout) are not always consistently called. Some issues are 100% repro for certain use cases. One example is noted here:

Other cases show randomly, or on slower devices, or on maybe on older browsers (e.g., Chrome 95).

I haven’t quite figured out exactly all the cases, and how to repro consistently.

Has anyone else experienced this issue? Did something fundamentally change in the way pages, transitions and events occur? It seems those events rely on css animation callbacks. Did it work differently in v5?

I’ve had issues with subnavbar for a few versions. Try the regular JS syntax instead of f7-subnavbar.

I have the same problem, i try to test the code like that:

$on('pageInit', (e, page) => {
      console.log('pageInit');
      $f7.preloader.show();
};

$on('pageAfterIn'), (e, page) => {
      console.log('pageAfterIn');
      $f7.preloader.hide();
};

pageInit will fire but not AfterIn

@nolimits4web help us please.