Bug 272815 – PIP video is blank when video element is within display: none container

• Component: Media
• Status: NEW

[Callionica]

On Safari, if you have a PIP video and you make its container `display: none`, the video will keep playing normally and the video will be visible. But if you start a new video while the container is display: none, the audio plays but the PIP window is black. Making the container visible during playback, makes the video appear again in the PIP window. 

On Chrome, the PIP window always displays the video regardless of the `display` setting for the `video` container. 

Chrome behaviour is better in this case. 

Is there ever a situation in which you’d want a black PIP window for a `video`? Either as a developer or a user? If Safari blanked the PIP window as soon as the container went `display: none`, Safari might have a case for a useful, consistent behaviour, but this doesn’t seem very useful as it is. It’d be much more useful for the PIP window to always display the video and if you changed Safari to get this useful behaviour, we’d also get cross-browser consistency.

[Karl Dubost]

Callionica, 
did you test with Firefox too?
What is the behavior there?

It would be cool if there was a reduced testcase to play with. 

Extracting the info above:
https://vimeo.com/channels/staffpicks/931894560

"display: none" activated on container AFTER video  starts

        AFTER
Safari  visible
Firefox visible
Chrome  visible
 
For the second case, how do you start the PIP if the video container is not visible?
Here a test case would be useful.

[Callionica]

Created attachment 470995 [details]
Repro of the behavior

Step-by-step repro of the bug with a description at each step and buttons to press for each action.

[Callionica]

I've attached a demo page that walks through everything. The steps are:
1. Video container visible
2. Video loads
3. Activate PIP
4. Play video
5. Hide video container
6. Load new video
7. Play video
8. PROBLEM: PIP window visible, audio playing, but video content not visible

Imagine you have a tabbed UI with the video on one of the pages and you want to use PIP to let the user see the video as they view other pages of the UI. The current Safari behavior makes that hard.

[Radar WebKit Bug Importer]

<rdar://problem/126979967>

[Ahmad Saleem]

(In reply to Callionica from comment #3)
> I've attached a demo page that walks through everything. The steps are:
> 1. Video container visible
> 2. Video loads
> 3. Activate PIP
> 4. Play video
> 5. Hide video container
> 6. Load new video
> 7. Play video
> 8. PROBLEM: PIP window visible, audio playing, but video content not visible
> 
> Imagine you have a tabbed UI with the video on one of the pages and you want
> to use PIP to let the user see the video as they view other pages of the UI.
> The current Safari behavior makes that hard.

Firefox Nightly 127 shows video, which would make it match Chrome Canary 125. While Safari does not show video in PIP. I think it is more about 'src' change issue.