Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glitchiness when large number of items in masonry grid #139

Open
hyfen opened this issue Apr 1, 2021 · 1 comment
Open

Glitchiness when large number of items in masonry grid #139

hyfen opened this issue Apr 1, 2021 · 1 comment

Comments

@hyfen
Copy link

hyfen commented Apr 1, 2021

I've been playing around with the masonry grid components in this repo and as as soon as I have a few hundred items, new items don't get positioned properly anymore.

All further items (loaded with ember-infinity) get piled up in the bottom left corner:
image

I think it's related to this rendering engine issue: Chrome seems to cap css grid rows to 1000 for performance reasons which impacts masonry layouts that use this trick. There doesn't seem to be a good workaround for big lists that still uses this css grid technique that I've come across. ☹️

(I came here via your EmberConf talk. Enjoyed it!)

@elwayman02
Copy link
Owner

Thanks! I heard someone say that Chrome is fixing this to go from a limit of 1000 to 10,000, so hopefully that will come through soon. Until then, people with need to support large lists can probably rely on one of the pure HTML/CSS options that bake in assumptions specific to their use-case, even though it's not a general solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants