I'm getting a weird UI bug on web on iOS across all three browsers I've tested (Chrome, Firefox, Safari). I'm on an iPhone 14. I have a number of cards that scroll vertically, and I have overflow-x-hidden overscroll-y-none on the body. I'm using Tailwind and NextJS.
When I quickly scroll up and down, I eventually get to this situation:
In the inspector on Safari, I've highlighted the card as the blue box. The blue box is where the card is supposed to be, according to the information in the DOM (and where I want it). Instead the card is showing up tiny and to the left, as you can see. Nothing in the DOM has changed, AFAICT. With a refresh, everything looks normal again.
You can see this behavior for yourself at gregliest.com. On an iPhone, scroll up and down quickly until you see this situation.
Does anyone know what's going on?