[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
Run the test project in the iOS simulator
Click the "Open" button
See the Plain Text page. This shows that when the content is loaded as plain text, the footer is correctly rendered
Click the Next button.
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.
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 && (
(...)
)}`
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.
Prerequisites
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
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 && (
)}`
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.