Ionic-framework: 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>



md5-60d04465dd828a99087a1f8926a31eac



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

[alexvibealex]

same issue any solution anyone please

[alexvibealex]

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

[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/277