Custom infinite scroll not working properly on Safari when adding elements to the top of the scrollbox

I’m building an application with an infinite scroll schedule feature which works fine on Chrome and Firefox, but not Safari.

Implementation:
When I initialize the page, I load the current month and surrounding months. As the user scrolls I use an intersection observer to detect when a limit is near to render an additional month.

Expected behavior:
When scrolling upward, both Chrome and Firefox add the new month to the top of the scroll container while maintaining the current view and expected position. This results in additional upward content in the scroll container (the new month) thereby allowing for additional upward scrolling.

Safari Behavior:
When Safari adds a new month, the scroll position jumps to the top of the new month and instantly triggers the intersection observer of the new month.

I’m hoping that someone can share some CSS property that can change this behavior.

Otherwise, it seems like I’ll need to (when scrolling upward):

1. Detect if it is a Safari browser
2. Calculate the size of the new month once it is rendered
3. Offset the scroll positional manually to the bottom of the new month
4. Hope that that does not interrupt ongoing elastic scroll functionality in progress

Does anyone have a better approach?

You need to sign in to view this answers