bug: Ionic Infinite Scroll Not Triggering When Content Doesn't Fill Screen

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x

### Current Behavior

ionic infinity scroll not working until the last card touches the end
I mean, I have an API, and fetching it pagewise, 1 page will have 10 item cards, and suppose if the screen is large, those 10 items will occupy half of the screen, so the last card won't touch the screen. It is not filling whole screen so new page won't appear

### Expected Behavior

It supposed to fetch all pages to fulfill the whole screen at a time. If fetching the API works 2 times (20 cards and the last card reaches the end), then it should work like this: Once it touches the end of the screen, then there's no issue.

### Steps to Reproduce

1. Implement an api which supports pagination (e.g. news, blogs, images)
2. Page size should be 2 or 3 (depending on screen and it should not touch the end of the screen)
3. Boom. Here's the bug: The 2nd page won't be fetched by API until you zoom the screen and let last card touch the bottom of the screen.

### Code Reproduction URL

https://web.somenu.digital/tabs/self-ordering/order-home

### Ionic Info

@ionic/angular": "^7.0.0

### Additional Information

_No response_