2044288 - www.kuaishou.com - Missing video thumbnails for some video sections

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 151.0

Steps to reproduce:

1. Navigate to: https://www.kuaishou.com/?isHome=1&source=NewReco
2. Scroll and observe

Expected Behavior:
Video thumbnails are present

Actual Behavior:
Video thumbnails are missing

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/222893

Comment 1

[Raul Bucata]

Attachment: Chr vs ff

Comment 2

[Raul Bucata]

Some other sections are missing thumbnails even in Chrome.

Comment 3

[Sky Schubert [:skyschub]]

The img tags are there and loaded, but the container has 0px. Also, clicking on it doesn't work.

Comment 4

[Jeff Muizelaar [:jrmuizel]]

Attachment: testcase.html

Comment 5

[Jeff Muizelaar [:jrmuizel]]

Daniel, does the test case show off a known bug?

Comment 6

[Daniel Holbert [:dholbert]]

Hmm, so here's what I see at first glance:

• the colorful area here (missing in Firefox) is an absos element, sized to fill its abspos-containing-block (inset:0)
• the abspos-containing block is formed by a position:relative; display:inline element (it's a which is inline by default)
• the only in-flow content in that containing block (the only thing to give it some nonzero size) is a display:block child (which happens to be a ::before pseudo-element, but the fact that we're using a pseudo is probably irrelevant).

So this is related to bug 489100 (not a regression from that bug, and not fixed by it, but a similar situation). The different thing here is the display:block child, i.e. the presence of an IB-split. TYLin, do you know if our inline-abspos-CB stuff is supposed to treat IB-splits as inflating the size of the containing block or not?

FWIW Safari 26.4 agrees with our rendering, but that might just be because we've got the same bug...

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

I filed a platform bug 2047061. The testcase there gathers more rendering difference between us and Google Chrome.

TYLin, do you know if our inline-abspos-CB stuff is supposed to treat IB-splits as inflating the size of the containing block or not?

Per current spec, the block frame in inline is not supposed to be used when computing the containing block rect. Google Chrome might use other ways to compute the rect. See https://github.com/w3c/csswg-drafts/issues/8284

Comment 8

[Daniel Holbert [:dholbert]]

Given that the site is depending on nonstandard Chrome-only behavior (which may get specced but we're waiting on that), the simplest thing right now might be to ship an intervention to unbreak this site; and we can update to match Chrome when their behavior gets specced (maybe not too far out, given the recent-ish activity [February of this year] on the CSSWG issue that TYLin linked).

At first glance, this seems to work as a sitepatch here (tested using Stylus):

.video-card-main { display: block }

Tom, would you mind crafting that into a sitepatch?

Comment 9

[Daniel Holbert [:dholbert]]

Note, it's somewhat hard to test this site thoroughly because a good fraction of the time [in Firefox as well as Chrome] I just get back some error-code JSON like this, instead of any web content:

{"result":2,"error_msg":null,"request_id":"781240965671024873"}

Other times the pageload just times out. But occasionally the site does actually load and I'm able to test this.

Comment 10

[Thomas Wisniewski [:twisniewski]]

On Android I only see a "use the app" page, so I'll make a desktop-only intervention for now.

Comment 11

[Thomas Wisniewski [:twisniewski]]

Actually, while working on the intervention, the site seems to be struggling, so I'm not sure whether I can write an automated test for it. I'll post a patch without one for now and revisit it later.

Comment 12

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2044288 - add a desktop-only CSS webcompat intervention for www.kuaishou.com; r?ksenia

Comment 13

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2044288 - add a desktop-only CSS webcompat intervention for www.kuaishou.com;

Comment 14

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: Google's World Cup mini-games will have obvious layout issues, and kuaishou.com's World Cup-themed main page will have broken video thumbnails.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: 1) On a desktop build, visit https://www.kuaishou.com/?isHome=1&source=NewReco and verify that the video thumbnails eventually load (the site is currently struggling, so may need to be refreshed a few times to not see an error page)

2. On an Android build, visit google.com, search for "World Cup 2026", scroll down until you see a blue soccer ball icon on the lower-right, click it, and confirm that the close button on the subsequent popup is positioned in a reasonable spot on the top-left of the popup.

• Risk associated with taking this patch: low
• Explanation of risk level: These patches only affect our webcompat intervention, and CSS on two sites (carefully crafted to reduce any chance of breakage).
• String changes made/needed?: none
• Is Android affected?: yes

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/41d78d98ee1b
https://hg.mozilla.org/integration/autoland/rev/74e66e9ce8cd
add a desktop-only CSS webcompat intervention for www.kuaishou.com; r=ksenia,webcompat-reviewers,dholbert

Comment 16

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/74e66e9ce8cd

Comment 17

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: kuaishou.com's World Cup-themed main page will have broken video thumbnails.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: 1) On a desktop build, visit https://www.kuaishou.com/?isHome=1&source=NewReco and verify that the video thumbnails eventually load (the site is currently struggling, so may need to be refreshed a few times to not see an error page)
• Risk associated with taking this patch: low
• Explanation of risk level: These patches only affect our webcompat intervention, and CSS on two sites (carefully crafted to reduce any chance of breakage).
• String changes made/needed?: none
• Is Android affected?: yes

Comment 18

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: kuaishou.com's World Cup-themed main page will have broken video thumbnails.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: 1) On a desktop build, visit https://www.kuaishou.com/?isHome=1&source=NewReco and verify that the video thumbnails eventually load (the site is currently struggling, so may need to be refreshed a few times to not see an error page)
• Risk associated with taking this patch: low
• Explanation of risk level: These patches only affect our webcompat intervention addon, and CSS on one sites (crafted to reduce any chance of breakage).
• String changes made/needed?: none
• Is Android affected?: yes

Comment 19

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2044288 - add a desktop-only CSS webcompat intervention for www.kuaishou.com; r?ksenia

Comment 20

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: kuaishou.com's World Cup-themed main page will have broken video thumbnails.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing: 1) On a desktop build, visit https://www.kuaishou.com/?isHome=1&source=NewReco and verify that the video thumbnails eventually load (the site is currently struggling, so may need to be refreshed a few times to not see an error page)
• Risk associated with taking this patch: low
• Explanation of risk level: These patches only affect our webcompat intervention addon, and CSS on one sites (crafted to reduce any chance of breakage).
• String changes made/needed?: none
• Is Android affected?: no

Comment 21

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/7e577c142912
https://hg.mozilla.org/releases/mozilla-release/rev/40a4006a3f1c

Comment 22

[Alin Ilea, Desktop Test Engineering]

Reproduced the issue in Release 152.0.1 using Windows 10.
Verified - Fixed in Release 152.0.2, Beta 153.0b2 and the latest Nightly build 154.0a1 (2026-06-21). The video thumbnails are loaded accordingly in the mentioned Fx versions.
@Thomas, is there anything left to do on your side? I ask because I noticed the bug was not marked as Resolved yet.
Thanks!

Comment 23

[Thomas Wisniewski [:twisniewski]]

Thanks! We leave bugs open for tracking while we are only shipping a webcompat intervention for them, as the underlying problems aren't truly resolved. I think we're fine here for now, until either the site fixes the bug, or we adopt Chrome's behavior.