ion-split-pane conflict with video fullscreen mode

[nampdn]

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'm building video app using ionic2. Everything goes fine when I play video without fullscreen mode. If I switch to fullscreen mode then all screen is totally in black.

Expected behavior:

Video can display in fullscreen when use ion-split-pane component.
Steps to reproduce:

Related code:

    <ion-split-pane when="md">
       <ion-menu [content]="content">
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Play list</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
        </ion-content>
      </ion-menu>
      
      <ion-nav #content [root]="rootPage" main></ion-nav>
    </ion-split-pane>

//I place video inside tabs
<video #video
       width="100%"
       autoplay
       controls>
</video>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.0.0
Xcode version: Not installed

[klemensz]

Same issue here. Since using <ion-split-pane> the video isn't visible in fullscreen any more. In our case the page becomes completely white. We're using the video.js player. What I've seen and tested so far, the problem exists in:

• Chrome (macOS and Android)
• Opera (macOS and Android)

The problem doesn't exist in:

• Safari (macOS)
• Firefox (macOS and Android)

[nampdn]

Hi @klemensz, do you have any update on this?

[klemensz]

@phamduongnhatnam No... but haven't updated to Ionic 3 yet (don't know if this would help).

[alesgenova]

I noticed the same issue.
In firefox the video goes fullscreen correctly, in chrome/chromium instead I see a white/gray screen.
Has anyone found a workaround?

Using ionic 3+

[lgmnemesis]

This is still open 👎
Is there any time frame for working on this issue?
thanks.

[pcgeonet]

Ionic3 same issue

[anshumansahu143]

same issue any solution anyone please

[anshumansahu143]

Sorry to bother you again but this is a serious issue for me . Any solution on this one please?

[klemensz]

Still an issue with Ionic 3.9.2.

[NTXAggie]

verifying this is still an issue on 3.9.2....Is there any ETA on this fix?

[thsbrown]

Same problem here

[thsbrown]

Ah I think I got it. Try adding a height: 100%; to the ion-split-pane this seems to resolve the issue for me.

[NTXAggie]

@spartanace1024 Fixed it for me