Map not displaying on tabs template

[guillenotfound]

Short description of the problem:

On beta.9 when I change to Map tab, I can see the map without any issue but since I upgrade to beta.10 the content doesn't change, after some investigation I have found that the HomePage keeps having show-page as class, if I change it to hide-page I'm able to see the map like I would do on beta.9

What behavior are you expecting?

See the map after changing tab.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Beta 9: http://imgur.com/ZfbuMsx
Beta 10: http://imgur.com/KNbUv6Z

Which Ionic Version? 1.x or 2.x
2.x Beta10

Plunker that shows an example of your issue

https://github.com/ZiFFeL1992/ionic2-google-maps

You have 2 branches each one with one beta.

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 8.0 Build version 8S128d

[CardosoGit]

Is a bug it? Still waiting...

[skaman]

same problem here. I also had to add this to nav-decor class, otherwise map the background was black.
.nav-decor { background-color: rgba(0, 0, 0, 0) !important; }

I can confirm that with tabs, i see the show-page class instead of hide-page for hidden pages

[skaman]

For now i can workaround with this

.nav-decor {
  background-color: rgba(0, 0, 0, 0) !important;
}

.show-page ion-page {
  opacity: 0;
}

.show-tab .show-page {
  opacity: 1;
}

[skaman]

#7154 seem fix also this

[guillenotfound]

@skaman how can I compile the current master? Hope thet release a new nightly soon anyway.

[skaman]

@ZiFFeL1992 don't need to compile the master.

Open your app.md.scss and app.ios.scss and put this at the end on both files

/* maps workaround */

ion-tab {
  transform: translateY(-200%);
}

ion-tab.show-tab {
  transform: translateY(0);
}

Then you can remove it when you upgrade to beta 11

[brandyscarney]

You can update to the latest nightly by running:

npm install --save ionic-angular@nightly

from within your project directory. Can you confirm that this is working with the latest nightly @ZiFFeL1992 ? Thanks! :)

[guillenotfound]

Yes, works with @skaman workaround on beta10.

I can't test on my project because is under a huge refactor so some things may not work, but as the workaround is part of beta 11 should be working there as well.

[jgw96]

Just did a quick test of this with the latest nightly and it seems to be fixed (: I will check back once beta.11 is released, but i will be closing this issue for now. Thanks for using Ionic!