Bug 277804 – Ghost Picture-in-Picture window after using it with canvas captureStream and reloading page

• Component: Media
• Status: RESOLVED FIXED

[Peter Paul Elfferich]

Created attachment 472083 [details]
Screenshot of ghost PiP window

Please see the following page with a minimal reproduction for this issue:
https://liveryvideo.github.io/test-capture-canvas-pip/

This page assigns the stream captured from the canvas element to the srcObject of the video element so as to mirror the canvas to the video element and enable it to be shown Picture-in-Picture. When you follow the steps however it unexpectedly shows a ghost PiP window.

Steps to reproduce:
1. Draw on canvas => Video mirrors canvas
2. Click Toggle PiP button => Opens video in Picture-in-Picture window
3. Click Toggle PiP button => Closes Picture-in-Picture window
4. Reload page => Start with empty canvas again
5. Draw on canvas => A ghost PiP window opens

In our application this already happens directly on page reload and also when you create a new canvas and video element and use those similarly after using PiP. I guess because we automatically load video and draw it to the canvas without waiting for input and so the stream becomes active and the video element starts playing immediately.

[Peter Paul Elfferich]

I just updated to iOS v17.6.1 and noticed this issue no longer occurs, so they seem to have been fixed in that version. I was at v17.6.0 before and can still reproduce the issue on iOS and iPadOS v17.5.1. Are there release notes about these updates anywhere? I can't find them.

PS: Another issue I noticed with this type of canvas-video-pip use also seems to be mitigated now;  After exiting PiP the video is shown at 1:1 resolution, not respecting the CSS (i.e: object-fit) sizing. But since v17.6.1 it only briefly does that before blinking to the correct size.