It seems that phones using Android 13 (in my case Galaxy S22+, possibly other devices and Android versions too) create a small empty gap at top of <body> when overscroll animations trigger. The gap appears when overscrolling repeatedly, and not every time. It takes a few repetitions to trigger it but once it does, it's anywhere between 1px to 20px tall. It's most visible when the page contents have a background color other than white. It's very annoying.
I can get rid of it with body {overscroll-behavior: none;} but this also kills all overscroll animations/smoothness, and scrolling feels somewhat clunky afterwards.
I'm wondering if anyone who has come across this issue has been able to get rid of it without affecting the scroll smoothness. I've found a few Reddit threads about this but they all deal with disabling the feature on your own phone, rather than fixing it for your website users.
