Ionic-framework: Ion-tabs work wrong in full screen mode

[wlz19930129]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I use video and ion-tabs in my app.When the video becomes full screen, the ion-tabs at the bottom also worked, although the icons disappear.

Expected behavior:

When switching element to full screen mode, ion-tabs will completely disappeared and not worked.

Steps to reproduce:

1.Change video to full screen mode.
2.Click the zone of ion-tabs.
Related code:

IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: true
})

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Cordova CLI: 6.4.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.4
Xcode version: Not installed

insert the output from ionic info here

[mpaland]

Do you have a plunker, screenshot?
What are you using? Windows app, browser (which browser)?

[wlz19930129]

Briefly ,I developed the system on WIN7, and packaged it to android app to run. Besides , I added a plugin which called cordova-plugin-crosswalk-webview while packaging.

When running “ionic serve” on chrome 54.0.2840.99 m (64-bit) and the video fills the screen, the icon-tabs will still in the bottom.

On the other hand, When ionic is running on a android phone platform and the video fills the screen, the icon-tabs disappeared and video control does not worked. Meanwhile ,the app will switch to ‘home tab’ page when I click the PLAY button.

[mhartington]

Related: https://github.com/driftyco/ionic/issues/10143

[shawnlan]

I see the same issue with 2.0.1.

[shawnlan]

Current workaround for me is to set the following:

.ion-page,ion-tab{
contain:none !important
}

[Floyd1256]

Same bug exists for ionic 3+ on android. @shawnlan 👍

[ceeliro]

Facing same issue with ionic 3.5.0. Lastest tab button is pressed and navigation is performed when video is in full screen when switching to minimize mode as both minimize button and last tab button seem to be overlapping each other. Still a bug? Any plan to fix or should i go with a workaround?

Thanks in advance

[gregd]

This is the screenshot from the Chrome Remote Debugging. The tab button isn't visible but for an unknown reason the button captures click events, so I cannot use Video Controls buttons.

[RailgunWinjoy]

hi have you fixed the problems video controls bar in fullscreen mode on android

[maxpaj]

Just wanted to bump the thread.

$ ionic info
cli packages: (C:\Users\\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.3.1
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.4
    npm  : 5.6.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

I'm running angular 5. Here's a snippet of my package.json:

    "@angular/animations": "^5.2.1",
    "@angular/common": "^5.2.1",
    "@angular/compiler": "^5.2.1",
    "@angular/compiler-cli": "^5.2.1",
    "@angular/core": "^5.2.1",
    "@angular/forms": "^5.2.1",
    "@angular/http": "^5.2.1",
    "ionic-angular": "^3.9.2",

I'm using video.js in my Ionic app, which is simply a wrapper for the HTML5 video element. When in video fullscreen, tabs are still showing at the bottom.

[updraftiq]

Any progress on this issue? I am seeing the same thing using Ionic 3.

• on android
• video in full screen on my media tab

user cannot get out of full screen mode because clicking the icon to do so in the video player doesn't work, ionic just navigates to the tab that is hidden behind it

[chhota89]

any Progress on this issue. Facing same issue when full screen mode is open control is not clickable.

[KiwiKilian]

Still a problem with Ionic 3 on Android. In my case the tabs are still visible when in fullscreen. The fix by https://github.com/ionic-team/ionic/issues/10132#issuecomment-282454472 works but should be properly fixed.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/166