Emoji picker has jumpy scroll jitter (x)

[MadLittleMods]

Description

When filtering for the :x: ❌ emoji and scrolling to the bottom, the picker will jitter a couple pixels up and down continuously whenever you're touching the bottom.

Steps to reproduce

1. Filter for x in the emoji picker
2. Scroll down to the bottom
3. Notice the jumpy scroll jitter whenever you are at the bottom

Log: not sent

Version information

• Browser: Chrome 87.0.4280.88
• OS: Windows 10
• URL: https://app.element.io/

I can't reproduce on macOS.

[tulir]

This happened to me: I have 🥈 in frequently used and tried to search for "2" to react with 2️⃣. The 2️⃣ is at the bottom, but due to that scroll/lazy loading bug, I can't actually click it (it shows up in the large preview at the bottom, but isn't clickable because it disappears from the picker itself)

peek.mp4

Firefox 91.0b9 on Ubuntu 21.04

[anoadragon453]

Still occurs with Element stable 1.7.34. It prevents me from picking some emoji at the bottom, specifically the US flag when searching for "us".

[t3chguy]

Is this still reproducible on latest develop? There was a lazy render bug which may have been related but now fixed.

[tulir]

Seems to be fixed. The lazy rendering is a bit too lazy though (it hides emoji if even 1 pixel of it is out of bounds, rather than if it's entirely out of bounds)

[MadLittleMods]

I can no longer reproduce either (and I could reproduce before refreshing today).

Fix for reference: matrix-org/matrix-react-sdk#7225

Thanks @t3chguy 🙂