https://pictogrammers.com/library/mdi/ loads icons weirdly

[abextm]

Before You Begin

• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When scrolling https://pictogrammers.com/library/mdi/ icons do not load before they are on screen and jump around when loads happen. This only happens in Firefox

Describe the behavior you expected

Icons attempt to load before they are on screen, and do not shuffle around as new icons are loaded

Steps to reproduce the issue

1. Navigate to https://pictogrammers.com/library/mdi/ in Firefox
2. Scroll down
3. Observe multiple empty rows
4. Observe icons moving which column they are in when the empty rows are filled

Which browser are you experiencing the issue?

Firefox 109.0.1 / Firefox Nightly 111.0a1 (2023-01-31)

Which operating system are you using to run this browser?

Arch Linux / Windows 10

Additional information

https://user-images.githubusercontent.com/12366911/216836610-c0ff9224-fdd0-41ee-9ec4-6dbfc5609ff6.mp4

[mririgoyen]

Thanks for the report and the video. It was very helpful in reproducing the behavior!

As it turns out, the library we use to virtualize the icon grid either has a bug or Firefox has a bug when it comes to doing calculations around fr units. I've made some adjustments to the styling that resolves the weird bouncing of icons you saw.

In terms of seeing white-space as you scroll, that's simply a side-effect of virtualization. I've made some adjustments to hopefully lessen that behavior under normal scrolling circumstances. I've also adding in some loading placeholders for those who like to scroll much faster than normal. Hopefully, both of these changes make the experience a little more natural.

Changes should be deployed in the next hour.