Mobile IndexFilters rendering as sticky when the element has not been scrolled to yet

[benwolfram]

Summary

I think I am noticing an issue with IndexFilters for IndexTable on mobile.

I came across it on a new table I am implementing, but also could reproduce it by adding a large green element to the products list too.

Basically, when IndexFilters is initialized off screen (ie. there are other longer elements before of it), it will initialize the IndexFilters as sticky -- even thought the IndexTable is not in view even yet.

It seems a similar issues happen in this case for the sticky "loading" state for IndexTable.

https://screenshot.click/23-34-k0h4y-dr3mq.mp4

Expected behavior

IndexFilters sticky state should not be visible unless the scroll position is greater than the IndexFilters' y position.

Actual behavior

https://screenshot.click/23-34-k0h4y-dr3mq.mp4

Steps to reproduce

1. Add an IndexTable + IndexFilters to a page
2. Ensure there is a long element before IndexTable, so it will not be rendered by default in the mobile view
3. Ensure you are viewing the page as mobile

Are you using React components?

Yes

Polaris version number

No response

Browser

No response

Device

No response