Ionic-framework: Ion-tabs not displaying in Android 4.4 kitkat

[Ghayyas]

Hello, recently I just Upgrade my Ionic 2 project from beta 10 to beta 11. But Its having problem with its tabs..
I Have tabs on bottom.. On browser It Display tabs and Samasung Galxy s5 (Android 5.0) but It not showing tabs on my android 4.4 kitkat.. When I click on my tab I navigates me to that page but is Shows white blank screen on tabs bar..

[shamrozwarraich]

samee :/ update to beta 11 and tab hide ... bt it work white area appear at tab places...

[bushev]

The same for me.

[shamrozwarraich]

any solution.... @bushev @Ghayyas ??/

[jgw96]

Hello all! Would you all mind telling me exactly which version of Android the tabs are not showing on?

[bushev]

@jgw96 Hello! I have tested Android 4.4.4

I'm not sure, related that or not, but I have found one more problem with UI: https://github.com/driftyco/ionic-conference-app/issues/223

[Ghayyas]

Hi Im having this issue on android 4.4 kitkat.

[jgw96]

@Ghayyas @bushev thanks! @Ghayyas is it 4.4.4 or 4.4.2?

[Ghayyas]

@jgw96 I have android 4.4.2

[pskhodad]

Same here on 4.4, I could see it happening when I have side-menu + tabs, similar to that in conference app

[danbucholtz]

Hello all,

I am not seeing this issue. Can you try running the following command and seeing if it resolves the issue:

ionic plugin add cordova-plugin-crosswalk-webview

Otherwise, can you provide a plunkr or codepen that I can use to recreate the issue?

Thanks,
Dan

[bushev]

@danbucholtz Hello! As for me it doesn't work with my app, crosswalk make the app 6 times bigger but now I can't see any icon or text inside my app:

I will try with conference app.

[bushev]

@danbucholtz the same for conference app.

Steps to reproduce:

1. Check out ionic-conference-app
2. ionic plugin add cordova-plugin-crosswalk-webview
3. ionic build android --release
4. Sing app and upload to Samsung Galaxy S5 - 4.4.4 - API 19 - Genymotion.
5. See only blank (white) screen after splash

[danbucholtz]

I can't speak to your apps, but I can recreate this issue by removing crosswalk from the conference app. Thanks for putting together the examples!

Assigning to beta 12.

Thanks,
Dan

[jgw96]

Hello all! So we have tested this with crosswalk on a moto g running android 4.4.2 and cannot reproduce the issue. I would recommend re-cloning the conference app, running npm install, add crosswalk with ionic plugin add cordova-plugin-crosswalk-webview and then run ionic run android. Also, make sure you completely uninstall the app from your device too. @bushev i would also recommend testing with a real device if possible and not genymotion. Thanks evereyone!

[bushev]

@jgw96

So, Android 4.4.2 (4.4.4) is supported with crosswalk only? That means all apps that use tabs should include crosswalk and be ~30mb in size?

PS: This but initially comes from a real device with Android 4.4.4

[jgw96]

@bushev could you try my above steps but without crosswalk please? Thanks!

[bushev]

@jgw96

Okay, my test results:

Latest ionic-conference-app

1. git clone https://github.com/driftyco/ionic-conference-app.git && cd ionic-conference-app
2. npm i && ionic run android

Result: I can see the white screen only

ionic-conference-app with beta10 (https://github.com/driftyco/ionic-conference-app/commit/5ec378dbc58c611160e3522505de4ac99a331697)

1. git checkout 5ec378dbc58c611160e3522505de4ac99a331697 .
2. Strict ionic beta version to 10 (remove "^")
3. rm -rf node_modules && npm i && ionic run android

Result: Application works great

[bushev]

2 builds attached.

android-debug-10.apk.zip
android-debug-11.apk.zip

[Ghayyas]

I have Android 4.4... When i login it show tabs. when I select any tab it hides the tab and shows white blank screen on tabs.. It only happens in Android 4.4, I have tested in browser and Android 5.0 and Iphone.. I works fine but not in my android 4.4 :(

[shamrozwarraich]

@ghayyas @bushev hiii
tab work for me
am removing the platform android and update it to 5.2.1 and then add the platform and run its working tabs shown ...
4.4kitkat

[jgw96]

Hello @Ghayyas and @bushev ! We are still having trouble reproducing this issue. Would you mind checking what version of Cordova your project is using? ionic info should tell you. Thanks!

[Ghayyas]

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.11
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 7.3 Build version 7D175

[Ghayyas]

Also It someTimes Blinks Loading.. LoadingCtrl

[bushev]

@jgw96 Hello! I have tested latest Cordova and Android platform 5.2.1

Unfortunately with the same result.

There is a short video demonstrates how it was: https://youtu.be/5a1j-CRBUFA

The same for conference app: https://youtu.be/qpR5CI_GbCA

---

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[oliviercherrier]

Hello,

I have got the same issue on Android 4.4 (Samsung Galaxy S3 and Galaxy Tab)

Ionic Info:
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 7 SP1
Node Version: v4.4.7

Can you give us update about the resolution of this issue?

Thank you for your help,
Olivier.

[F1ow]

Hi, I'm having the same issue on iOS 8.x

Ionic Info:
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 7.3.1 Build version 7D1014

[guidux]

Hi, I am having the same issue on Android 4.4.2 (samsung s5 mini) and 4.4.4 (genymotion).

I downloaded the latest code of ionic-conference-app and after playing with its css attributes I was able to display the tab by changing the inline css attribute of "ion-tabbar" bottom: 0; to a 2px but when changing to another tab the tab bar vanishes again till go back. I spent many hours to try to find out the root cause and a possible work around. but I couldn't. Similar behaviour happens to my own project I changed the bottom to different values.

I also upload a youtube video to show the behaviour.

Additionally I left my ionic info:

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.11
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[stewwan]

same here

Your system information:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v4.4.3

[stewwan]

Conference App - Android 4.4.2 - samsung galaxy s4 mini

tabs doesn't appear

but appears in detail

[RigoTheDev]

Any reason for why this isn't working? It's pretty weird.

[jgw96]

Happy to say that after testing of beta.12 today this issue seems to be fixed. Tabs are working perfectly on Android 4.4.2 and up. Thanks everyone for using Ionic!

[AbuHani]

still have the same issue in the latest release v2.0.0-rc.0 ! when using tabs with side menu.

[AbuHani]

i fix it by set z-index: -1;

ion-nav, ion-tab, ion-tabs {
z-index: -1;
}

[johnofkorea]

@AbuHani Thank you so much!! You are my hero!!

I don't understand why setting z-index to -1, not 1 solves this problem.

However, I cannot thank you enough. Thank you so much!!!

[shamrozwarraich]

i which componets are file u add this @johnofkorea @AbuHani

ion-nav, ion-tab, ion-tabs {
z-index: -1;
}

[johnofkorea]

@shamrozwarraich
In my case, app/theme/variables.scss didn't work. (which is weird, though..)
The right target is in the very first page the tabs shows.
Let's say tabs shows pageA, pageB, pageC, and pageD.
If the very first page the tabs shows is pageA,
then you can add this at the bottom of "page-a.scss"

Or, to make things safe, you can add this to the bottom of all the scss files you find. :-)
Good luck, @shamrozwarraich !

[pskhodad]

This seems to be regression due to https://github.com/driftyco/ionic/commit/e4bbcc667a1c8f9a1aaade9a6c7ec79b8759ef67
Reverting the change there renders the tabs just fine.
Since issue(https://github.com/driftyco/ionic/issues/7154) that commit was fixing was specific to iOS and this issue is specific to Android 4.4, we need to have solution which addresses issues on both.

[pskhodad]

can this issue be re-opened to get proper fix.

[dumparun]

Appreciate a fix for this please. I do have the same problem. +1

[thendokhae]

@shamrozwarraich

your solution worked for me as well, thanks

[priyeshn]

it did not work for me.. Which scss file we need to put in this code

[pbreuss]

I added

ion-nav, ion-tab, ion-tabs {
z-index: -1;
}

to the file src/app/app.scss and it worked right away: tabs are showing!

Tested on:
Android 4.4.4 (Sony Xperia)

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v4.6.0
Xcode version: Xcode 8.1 Build version 8B62

[jgw96]

Hello all! Does this still happen in rc4 ?

[cesarandreslopez]

Just checked rc4 in Kitkat and seems to work ok from my side.

[pbreuss]

I had this issue as well on my old Android 4.4.4 test device, and now I tested it again with RC4 and the problem does not seem to happen anymore. So no fix is needed to display the tabs on Android 4.4.4.

Here is my platform:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

PS: Ionic is wonderful!

[jgw96]

Hello all! Since this seems to be fixed now (you guys cannot repro and i cannot repro) I am going to close this issue for now. Thanks for using Ionic! (:

[wivancic]

I had one page where the tab wasn't showing on Android 4.4.4

This addition fixed the problem.
Was using Ionic Framework Version: 2.0.0-rc.2

ion-nav, ion-tab, ion-tabs {
z-index: -1;
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.