Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Weird jumps on grid container with gaps

See original GitHub issue


I’ve updated to the latest version (1.6.x), and I’ve noticed that there are some jumps of the container when the scroller stops.

I’m able to reproduce it on the demo. ezgif-3-e8c0602e0742

All you need to do is to add css to the #messages

#messages {
    border-top: 2px solid rgb(230, 236, 240);
    display: grid; // <----
    grid-gap: 2em; // <----

It is not reproduces on v1.5.x.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

catamphetaminecommented, Dec 12, 2020

Fixed in virtual-scroller@1.6.4

felixmoshcommented, Dec 13, 2020

You are correct, looks like there is a difference between changing the styles in dev-tools & starting the app with the styles.

Thank you 🙏🏼

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Grid Gotchas And Stumbling Blocks - Smashing Magazine
Here we are controlling the layout across the row. We are allowing the flex items to wrap, so they create new rows, but...
Read more >
Preventing a Grid Blowout | CSS-Tricks
In our simple demo, the <main> element automatically places itself in that first column as it is the first child of the grid....
Read more >
layout() leaves large gaps on specific layouts (columns ...
Hi, I have created a fluid layout where I add a column every 200px. At a packery container width of 800px I'd have...
Read more >
Auto-placement in grid layout - CSS: Cascading Style Sheets
You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that...
Read more >
Why does CSS Grid layout add extra gaps between cells?
The grid items (red lines) neatly wrap their content (the images). This happens only because the container is set to align-items: center ....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found