Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: da27aabdc21225e0c17876c39a6d084a9dd92d44
https://github.com/WebKit/WebKit/commit/da27aabdc21225e0c17876c39a6d084a9dd92d44
Author: Sammy Gill <[email protected]>
Date: 2025-10-09 (Thu, 09 Oct 2025)
Changed paths:
A LayoutTests/fast/layout/flex-force-shrink-tiktok-quirk-expected.html
A LayoutTests/fast/layout/flex-force-shrink-tiktok-quirk.html
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:
-----------
[TikTok][iOS] Comments can be clipped when watching videos on iPad portrait
mode.
https://bugs.webkit.org/show_bug.cgi?id=300413
rdar://138083287
Reviewed by Brandon Stewart.
When viewing content on TikTok with an iPad in portrait mode, the video
and comment section may be presented side by side. Depending on the
width of the device, this may result in comments overflowing off the
screen, making them unreadable.
>From looking at the markup and styling, it appears that the video and
comments, which are really the two main pieces of content on the page,
are two flex items within a fixed-position flexbox. The styling ends up
disabling shrinking on the two flex items, which is one of the reasons
the comments section ends up overflowing. To help improve the user
experience, this patch adds a quirk that addresses this problem with two
sets of changes:
1.) Setting flex-shrink on both of the flex items that hold the video
and comments section.
2.) Setting min-width: 0 on the flex item to hold the comments section.
This is to disable the automatic minimum size that flex layout will
compute on the item, which can limit the amount of shrinking that can
happen.
* Source/WebCore/page/Quirks.cpp:
(WebCore::Quirks::needsTikTokOverflowingContentQuirk const):
The general heuristic used to determine whether or not we need to apply
the quirk is based upon the style of the element that is passed in along
with the style of the parent. StyleAdjuster will give us both of these,
and we will make a decision if we need to apply the quirk and how,
depending on:
1.) First, we check to see if the parent is the fixed-position flexbox
since this is what we expect to hold these two pieces of content.
2.) Check to see if that element has "DivBrowserModeContainer,"
contained somewhere as a substring in one of its class names. We check
to see if it is a substring rather than an exact match of a class name
since the prefix for this class name seems to be a random identifier,
which could very easily change depending on how it was generated/chosen.
3.) Check to see if the passed-in element has either "DivVideoContainer,"
or "DivContentContainer," as a substring. The former appears to be the
flex item which holds the video and the latter appears to be the flex
item which holds the comments section.
Depending on the result of 3, we return an enum to the StyleAdjuster
code to tell it which quirk to apply since we want to apply slightly
different styles depending on the element.
Canonical link: https://commits.webkit.org/301273@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
