[Webkit-unassigned] [Bug 232039] New: Black box being rendered behind HTML video elements that are portrait

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Oct 20 13:29:52 PDT 2021


https://bugs.webkit.org/show_bug.cgi?id=232039

            Bug ID: 232039
           Summary: Black box being rendered behind HTML video elements
                    that are portrait
           Product: WebKit
           Version: Safari 15
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: rex at iotum.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 441928

  --> https://bugs.webkit.org/attachment.cgi?id=441928&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211020/7dd46929/attachment.htm>


More information about the webkit-unassigned mailing list