Bug 240604 - Video starts playback with wrong object-fit on first frame using 'object-fit: cover'
Summary: Video starts playback with wrong object-fit on first frame using 'object-fit:...
Status: RESOLVED DUPLICATE of bug 246552
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 240786 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-05-18 15:03 PDT by Matias Szylkowski
Modified: 2022-11-17 04:33 PST (History)
10 users (show)

See Also:


Attachments
Screen recording of video jumping in size due to object-fit: cover (17.27 MB, video/mp4)
2022-05-18 15:03 PDT, Matias Szylkowski
no flags Details
screen recording from nytimes.com (2.98 MB, video/mp4)
2022-06-08 13:34 PDT, Johannes Odland
no flags Details
Screen recording of issue on front page of nytimes.com (4.59 MB, video/mp4)
2022-07-24 22:54 PDT, Johannes Odland
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Matias Szylkowski 2022-05-18 15:03:38 PDT
Created attachment 459556 [details]
Screen recording of video jumping in size due to object-fit: cover

When playing a video with object-fit: cover on Webkit (iOS 15.5, reproduced on Chrome & Safari) the first frame of the video gets shown with object-fit: contain (more zoomed out) and then the rest of the video plays with the proper object-fit (zoomed in, correct size). This results in a very visible jump in size of any video with the object-fit: cover CSS rule.

Can be reproduced with a minimal example: https://codepen.io/mszylkowski/pen/eYVWBWL (video attached)
Comment 1 Radar WebKit Bug Importer 2022-05-19 15:20:41 PDT
<rdar://problem/93606969>
Comment 2 Alexey Proskuryakov 2022-05-28 17:46:03 PDT
*** Bug 240786 has been marked as a duplicate of this bug. ***
Comment 3 Johannes Odland 2022-05-29 02:54:58 PDT
The bug seems to affect object-fit cover and contain the same, as seen on the front page of Reddit. (See attachment on the duplicate bug https://bugs.webkit.org/show_bug.cgi?id=240786)
Comment 4 Johannes Odland 2022-06-08 13:34:58 PDT
Created attachment 460100 [details]
screen recording from nytimes.com

This bug is causing issues all over the web, from webpages like reddit to nytimes.com. 
Attaching a video of the issue on a nytimes article.
Comment 5 Youssef Soliman 2022-06-20 15:59:27 PDT
*** Bug 241789 has been marked as a duplicate of this bug. ***
Comment 6 Johannes Odland 2022-07-24 22:54:42 PDT
Created attachment 461192 [details]
Screen recording of issue on front page of nytimes.com
Comment 7 Johannes Odland 2022-09-06 05:06:51 PDT
Any progress on this bug?
Comment 8 Felix Niklas 2022-09-08 02:34:52 PDT
Another example website where the effect is visible: https://www.by-us.studio/dc-open-21

It might be that it's only visible on slower devices. I see the video starting with a small 100% width crop before it fills the screen on a iPhone SE (1st Gen).
Comment 9 Johannes Odland 2022-09-08 04:44:41 PDT
> It might be that it's only visible on slower devices. 

It happens both on my iPhone 11 Pro _and_ my MacBook Pro M1 Max.
Comment 10 Ahmad Saleem 2022-09-25 14:02:02 PDT
I am able to reproduce this on macOS 12.6 using Safari 16 and STP 154, hence changing title to reflect that it is not iOS only issue but also present wherever object-fit: cover is used.

I reproduced it using URL in Comment 08, where Safari show zoomed-out frame before showing full frame, which is not the case in Chrome Canary 108 and Firefox Nightly 107. Thanks!
Comment 12 Stef Kischak 2022-10-21 13:21:40 PDT
I am also seeing this bug on MacOS 12.6, latest Safari versions. I was able to reproduce this with both "cover" and "none", but NOT with "fill". 

That makes me think the use of finalRect.setSize in Ahmad Saleem's link is relevant, but I'm not sure to what extent.

I also noticed that, for me, this issue only seems to affect the video the first time it is played, and does not affect subsequent playbacks, even upon page refresh.
Comment 13 Johannes Odland 2022-10-24 23:30:08 PDT
Could it be related to this line?

https://github.com/WebKit/WebKit/blob/3afb34f466db6634ec6b7cea95b9cf6a735b43af/Source/WebKit/WebProcess/GPU/media/MediaPlayerPrivateRemote.cpp#L164

It seems to set up the video layer with the elements size, and not the replaced content rect.

This was changed to fix https://bugs.webkit.org/show_bug.cgi?id=226960, and this new bug appeared around the same time. 

Changelog: https://bugs.webkit.org/attachment.cgi?id=454771&action=diff
Comment 14 Johannes Odland 2022-10-25 00:11:00 PDT
It seems the line has been changed in a recent PR: https://github.com/WebKit/WebKit/pull/5405/files

Could this have fixed the bug?
Comment 15 Ahmad Saleem 2022-10-25 00:42:33 PDT
(In reply to Johannes Odland from comment #14)
> It seems the line has been changed in a recent PR:
> https://github.com/WebKit/WebKit/pull/5405/files
> 
> Could this have fixed the bug?

It might or could have but someone need to confirm from Webkit ToT (Top of Tree) build with this patch to confirm whether this bug is fixed or not. Or wait till this patch is part of Safari Technology Preview 157 or 158.
Comment 16 Johannes Odland 2022-11-08 00:01:14 PST
(In reply to Johannes Odland from comment #14)
> It seems the line has been changed in a recent PR:
> https://github.com/WebKit/WebKit/pull/5405/files
> 
> Could this have fixed the bug?

The issue connected to the PR is available here: https://bugs.webkit.org/show_bug.cgi?id=246552
Comment 17 Johannes Odland 2022-11-17 02:29:04 PST
Issue seems to be fixed in Safari TP 158 on macOS.
Comment 18 Ahmad Saleem 2022-11-17 04:16:08 PST
(In reply to Johannes Odland from comment #17)
> Issue seems to be fixed in Safari TP 158 on macOS.

Good to know. I will mark it as duplicate of other bug.

Please reopen, if it is still reproducible.

*** This bug has been marked as a duplicate of bug 246552 ***