1945819 - 500px.com - The loading of photos is stuck in a loading state when scrolling towards the end of the page

Status: NEW

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

Description

[Raul Bucata]

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

Steps to reproduce:

1. Navigate to: https://500px.com/
2. Perform account login
3. Access https://500px.com/discover/popular
4. Scroll the page a while towards the end and observe

Expected Behavior:
Photos are loading

Actual Behavior:
The loading of the feed is stuck in a loading state

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/148018

Comment 1

[Raul Bucata]

Attachment: ff

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Dennis Schubert [:denschub]]

I didn't look at this at all except for the screenshot, but my first idea was something around an IntersectionObserver. I'll assign the DOM team for now. :)

Comment 4

[Sean Feng [:sefeng211]]

I looked into this, and I wonder if we can get someone who knows React better to look into this.

This site uses https://github.com/ankeetmaini/react-infinite-scroll-component, it's unlikely a bug in this component, but rather the site doesn't populate data correctly for this component. This component uses a variable this.props.children, which should be the images to display. I wonder the site doesn't append elements correctly to this variable. I don't really know how React works, so I run out of ideas...

Comment 5

[Sean Feng [:sefeng211]]

I don't think I am able to debug this further, so adding webcompat:blocked

Comment 6

[Holger Benl [:hbenl]]

The site does load additional pictures and puts them in the grid container. But Firefox limits the number of grid rows to 10,000 (Bug 1752237) and when this limit is reached, no more grid items are displayed. The grid on this site uses rows with a height of 1 pixel (grid-auto-rows: 1px;) and each picture spans hundreds of rows, so this limit is reached relatively quickly.

Comment 7

[Holger Benl [:hbenl]]

Note that the URL has changed to https://500px.com/popular

Comment 9

[Daniel Holbert [:dholbert]]

I retested this today (just in case the site happened to have changed in a way that avoids this).

This is still reproducible, at https://500px.com/popular (the URL has changed since comment 0).

Here's why this site hits the 9999-grid-row-limit so easily: they have 1px-tall grid-rows.

Specifically:

• they have 5 equally-sized columns (on my current Firefox window at least): grid-template-columns: repeat(5, 1fr);
• ...but the grid rows are 1px tall (and generated as-needed based on the content): grid-auto-rows: 1px
• ...and they use grid auto-placement to place images into the grid, using e.g. grid-row: span 300 for an image that they'd like to be 300px tall (so it spans 300 1px-tall-rows, which makes it 300px tall, and avoids colliding with other auto-placed images).

Given that -- with most images being in the ballpark of 300px tall, this site only ends up being able to have ~33 rows of children before they hit the 9999 track limit (because each 300px child is roughly 300 rows in height, and 33 * 300 = 9900).