Bug 275210 – Video element with object-fit: cover initially displays incorrectly, depending on padding of surrounding element

• Status: NEW
• Component: Media

[Alex Suzuki]

In some cases, if the video element has the object-fit property set to 'cover', the video is not initially scaled to fit into the video element.

The sample obtains a video stream from the device's environment-facing camera and sets it on the video element.
Toggling the object-fit style attribute from 'cover' to 'fill' and shortly afterwards back to 'cover' resolves the issue.
Other ways of "tickling" the video element like setting display to 'none' and back to 'block' work as well.

The behavior appears to be related to the padding of the surrounding element. In the reproducer the padding is to 15px, which triggers the issue (see screen recording in repo).
If the padding is changed slightly, e.g. to 16px, the issue does not appear. I did not do an exhaustive search of values that trigger the behavior.

Minimum-reproducible sample repo:
https://github.com/pixelverse-llc/ios-gum-video-element-object-fit-cover-lost

[Alexey Proskuryakov]

Thank you for the report! Could you please post configuration details (exact OS versions and hardware models where this reproduces for you, and also where it doesn't reproduce, if any).

[Alex Suzuki]

Certainly. I can reproduce this on the two devices I own:
- iPhone 15 Pro (MTV63ZD/A), iOS 17.5.1 (21F90)
- iPhone 12 (MGJ83ZD/A), iOS 17.5.1 (21F90)

[Radar WebKit Bug Importer]

<rdar://problem/129358494>