Page Loaded As if It's A Popup

Questions
1

I started using v5 of Framework7 and noticed that a page is loaded from the bottom as if it’s a popup instead of sliding in from the right. I’m sure I’m missing some configuration, but I couldn’t figure out what it is. I have created a simple page below. You can click on the link for Table and you will see the issue.

https://omni2.xyretail.com/test/framework7

Any suggestion is appreciative.

Thanks!

–
Update:
It seems that this issue only happens on web. It works fine when I tested it on my phone.

2

I figured out what the issue is. Since I set theme to auto it took Material Design behavior by default in Chrome.

3

I use the below css in my app.css, to override the default Material Design animation (vertical slide in) with a horizontal one like on iOS. Just because I think horizontal slide in is a more natural way, even on Android.

@keyframes md-page-next-to-current {
  from {
    transform: translate3d(56px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes md-page-current-to-next {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(56px, 0, 0);
    opacity: 0;
  }
}