bug: footer with collapse property set to fade does not render properly on dynamic content

[ijsje71]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When dynamically loading in content, a footer that has the collapse property set to fade is not properly refreshed. Instead of having a full footer, the --opacity-scale property is set to a very small number (since it did not have any content when it was rendered in), but is not updated when the content is loaded. Only when the user then scrolls, the footer realises that there's scrollable content and then the footer updates accordingly.

In my code example I have 2 pages, one with plain text that makes the content scrollable. This is picked up by the footer and is rendered in correctly.

When you click the next button, you'll see the bug.

Expected Behavior

I expect the footer to update once the content is loaded into the page, instead of when the user first scrolls after the content is loaded. Since the content is loaded using state variables, I would expect the pages to handle the changes accordingly.

Steps to Reproduce

1. Run the test project in the iOS simulator
2. Click the "Open" button
3. See the Plain Text page. This shows that when the content is loaded as plain text, the footer is correctly rendered
4. Click the Next button.
5. Observe the bug occurring

First the page loads without any content (it's fetching it from a free API) Then the content is loaded Notice how the buttons now float onto that content, instead of being rendered inside the footer Scroll the page Notice the footer reappears

Since I'm using a free API that returns random data for this, you may have to go back & forth between the Plain Text and Dynamic Text pages a few times before it provides enough content for the bug to happen.

Code Reproduction URL

https://github.com/ijsje71/footer-not-rendering-correctly-example

Ionic Info

Ionic:

Ionic CLI : 7.1.5 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.7.3

Capacitor:

Capacitor CLI : 5.7.0 @capacitor/android : not installed @capacitor/core : 5.7.0 @capacitor/ios : 5.7.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.10.0 (/usr/local/Cellar/node@20/20.10.0/bin/node) npm : 10.2.3 OS : macOS Unknown

Additional Information

One of the workarounds that I have tried is loading in the footer once the content is loaded using inline JSX expressions, similar to this: {content && ( <IonFooter>(...)</IonFooter> )}

I have since removed this workaround, however, since it interferes with the page transitions. Since the footer is loaded after initial rendering, the footer is excluded from the page transition animations. I need a fix so that the page transitions remain intact, and the footer is also rendered in correctly.

[ijsje71]

Can anyone take a look at this? @liamdebeasi @sean-perkins @mhartington