Added page transition, and on going back the root page is empty

Ionic Framework ionic-v3
1

I have a button in my root page which leads to a “Shop” page. I started the project using the blank template, so, on entering the Shop Page, I have a “back” arrow in the top-left corner of the screen.

On clicking the button, the animation works fine, but when I click the “back” arrow, the page it lands to is empty.

If I take out the animation, the “back” arrow works just fine.
What is happening?
Thank you.

Here is the code for my animation:

 onGoToShop(){
    this.navCtrl.push(ShopPage, {}, {direction: 'back', duration: 2000, easing: 'ease-out'} );
  }

If the animation is set, the NavController method navCtrl.popToRoot() doesn’t work either, but it works just fine if I take the animation out.