ijsje71
commented
4 months ago Can anyone take a look at this? @liamdebeasi @sean-perkins @mhartington
Open ijsje71 opened 6 months ago
ijsje71
commented
4 months ago Can anyone take a look at this? @liamdebeasi @sean-perkins @mhartington
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.