Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 33c9b945680254575bde2d4f6711d0735043c4ee
https://github.com/WebKit/WebKit/commit/33c9b945680254575bde2d4f6711d0735043c4ee
Author: Sammy Gill <[email protected]>
Date: 2025-12-12 (Fri, 12 Dec 2025)
Changed paths:
M Source/WebCore/page/Quirks.cpp
M Source/WebCore/page/Quirks.h
M Source/WebCore/page/QuirksData.h
M Source/WebCore/style/StyleAdjuster.cpp
Log Message:
-----------
instagram.com: Some reels get resized back and forth while playing.
https://bugs.webkit.org/show_bug.cgi?id=304073
rdar://164573070
Reviewed by Brent Fulgham, Brandon Stewart, and Vitor Roriz.
It seems that when some users go to Instagram and try to view reels,
they may experience some behavior where the reels get abruptly resized
during their playback. The most common manifestation of this seems to be
that the reel starts with a small size and then in the middle of the
playback (from observation this seems to be around the first five
seconds of the reel), and then gets resized to become larger. This
larger size is likely what is supposed to be the expected size since it
seems to match the rest of the content/page.
>From an investigation this appears to be an issue with the content that
Instagram is sending us rather than a WebKit bug. There are two main
observations that led me to this conclusion:
1.) Some logging in SourceBufferParserAVFObjC::didProvideMediaDataForTrackID
indicates that we receive two types of video content at different points
in time. For the first five seconds, we get video content that is the
smaller size
12631190667774328833 presentationSize width=360 height=640presentationTime
{"value":0,"numerator":0,"denominator":15360,"flags":1}
then later on we get video content that is the larger size
12631190667774328833 presentationSize width=720 height=1280presentationTime
{"value":5,"numerator":76800,"denominator":15360,"flags":1}
2.) The styling of the page results in a rendering that I would expect
with regards to the size of the video that we are seeing. Here is some
simplified markup from the page
<div class="x78zum5 xedcshv" style="height: 1046px; width: 588.375px;"> [1]
<div class="x78zum5 xl56j7k x1n2onr6 xh8yej3"> [2]
<div class="x1i5p2am x1whfx0g xr2y4jy x1ihp6rs x1yxe93k x6ikm8r
x10wlt62"> [3]
<div class="x1lliihq x5yr21d x1n2onr6 xh8yej3 x1ja2u2z">
<div class="x5yr21d x1n2onr6 xh8yej3">
<div class="x5yr21d x1n2onr6 xh8yej3">
<div class="x5yr21d x1uhb9sk xh8yej3">
<video class="x1lliihq x5yr21d xh8yej3"
playsinline="" preload="none" src="" style="display: block;"></video> [4]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[1] is a flexbox with a fixed width and height. This inline style seems
to come from the page.
[2] is also a flexbox but has width: 100%. The used size of this box
is the same as its parent.
[3] is a flex item with width: auto. When the video is narrow the size
of this box matches the narrow size of the video and when it is larger
it matches the larger size of the video.
[4] and everything up to here has width: 100%. The sizes match the size
of the video.
The interesting bit of the layout starts at [3]. Since this is a flex
item with an automatic width, flex layout is going to compute this box's
base size using the max content size. The max-content size of the flex
item ends up coming from the size of the video. Even though the video
has width: 100% we cannot resolve this size so it ends up coming from
the size of the content. You can see this occurring if you use the web
inspector and add some content like <div>aaaaaa....</div> (add enough
text content so that the max-content size of the div is larger than the
video) then the size of the flex item changes. This resulting base size
becomes the used size of the flex item and defines the available space
for the rest of the descendant content, like the video, that gets used
to resolve width: 100%.
The above implies that the rendering, and specifically the resizing
behavior, is correct with respect to the content we are getting. To
improve the user experience we can create a quirk that stops the
resizing from occuring. This can be done by setting flex-grow: 1 on [3]
above to cause it to take up the remaining space during flex layout.
* Source/WebCore/page/Quirks.cpp:
(WebCore::Quirks::needsInstagramResizingReelsQuirk const):
General heuristic to try and determine that the element is the flex item
we are trying to apply flex-grow on. This is done by trying to match the
styling of the element and the parent with a certain combination that
matches this specific piece of content. Also make sure that there is a
descendant video element.
(WebCore::handleInstagramQuirks):
This was compiled only on IOS_FAMILY before but we will need this on Mac
as well but make sure to keep the iOS quirk restricted still.
Canonical link: https://commits.webkit.org/304389@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
