Bug 232039 - Black box being rendered behind HTML video elements that are portrait
Summary: Black box being rendered behind HTML video elements that are portrait
Status: RESOLVED DUPLICATE of bug 229792
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 15
Hardware: All Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-10-20 13:29 PDT by Rex
Modified: 2021-10-22 12:20 PDT (History)
6 users (show)

See Also:


Attachments
Screenshot of black box behind video (186.83 KB, image/jpeg)
2021-10-20 13:29 PDT, Rex
no flags Details
Path to HTML video element on DOM (932.29 KB, image/png)
2021-10-20 13:31 PDT, Rex
no flags Details
Codepen reproduction screenshot (128.66 KB, image/jpeg)
2021-10-20 14:41 PDT, Rex
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Rex 2021-10-20 13:29:52 PDT
Created attachment 441928 [details]
Screenshot of black box behind video

With Safari 15 on iPhones and iPads, a black box is shown behind the HTML video when rendering a portrait video of the front-camera on our WebRTC conferencing site.
The black box is not part of the HTML and is being rendered behind the video element but over everything else.
See the attached screenshot for an example.

It appears to be caused by something related to CSS, since making the video element height 99.9% instead of 100% removes that black box for iPhones and some iPads.
The device's screen size affects if the black box shows or not.

We are unable to easily reproduce this outside of our site, since it involves rendering a portrait front-camera video feed onto a landscape shaped container.

To reproduce on our site, do the following:
1) Go to https://hello.freeconference.com/conf/call/444?skip_join=true&name=test on Safari 15 with an iPad simulator in landscape mode and sidebar closed, or a physical iPad in portrait mode.
2) Accept the Mic and Camera permission prompts to join the call
3) See black box behind video video element
Comment 1 Rex 2021-10-20 13:31:34 PDT
Created attachment 441929 [details]
Path to HTML video element on DOM
Comment 2 Rex 2021-10-20 14:40:22 PDT
We have reproduced this on a codepen sandbox on an iPad 8th gen with Safari 15.

https://codepen.io/rex-iotum/pen/mdMrqPw
Comment 3 Rex 2021-10-20 14:41:51 PDT
Created attachment 441941 [details]
Codepen reproduction screenshot
Comment 4 youenn fablet 2021-10-21 01:43:17 PDT
Please try on latest iOS15.1 beta

*** This bug has been marked as a duplicate of bug 229792 ***
Comment 5 Joyce Ma 2021-10-22 12:06:45 PDT
This still occurs on  iOS 15.2.
Comment 6 Joyce Ma 2021-10-22 12:20:11 PDT
Ah, nevermind. Read my versioning wrong. Doh!