On iOS, our header collapse implementation (#2216) is buggy, as identified in #2242. Initial attempts to address this suggest that an overhaul of our current implementation may be required to fix this, see [awaiting PR].
Why?
A collapsable header should be available as an option on all platforms, including iOS.
How?
Despite initial thoughts, I don't believe this issue is related to the screen safe-area, which appears to be properly handled natively by the ion-header component. I believe that the cause of the issue is iOS's enthusiastic momentum-based scrolling. This results in glitches when a scrollable ion-content blocks resizes whilst its content is being scrolled.
One thing to try: make the condensed header fixed position so it floats above content and adding padding (safe-area + header height) to content. This should allow the ion-content element to remain the same size throughout. However there may be some issues relating to ionic's default header behaviour.
fullscreen property
One possible solution that I explored was using fullscreen property on ion-content. This should allow the scroll area to extend to the very edges of the screen, and therefore not be altered when the header is collapsed. However this property has no effect in our case, I think because of our set up of the template's ion-content being nested inside a few other elements within the page, rather than appearing directly below the header component.
We can replicate the behaviour of setting [fullscreen]="true" by setting --offset-top to the height of our header (including the safe-area offset) on the ion-content component. This effectively adds padding to the top of the inner inner-scroll element inside the ion-content element. However, the scrolling glitch persists in this case. I think the only way to get this method to work would be to have the value of inner-scroll change dynamically when the header collapse is animating, to consistently reflect the visible height of the header component throughout.
There are additional options for customising the ion-header component on iOS compared to other platforms, e.g. condensed and fade. However none of these corresponds to our collapsing header functionality, and none gives more screen real estate to content, which was the main motivation for the collapsing header functionality. They are also not trivial to implement with our current header/content element configuration.
What?
On iOS, our header collapse implementation (#2216) is buggy, as identified in #2242. Initial attempts to address this suggest that an overhaul of our current implementation may be required to fix this, see [awaiting PR].
Why?
A collapsable header should be available as an option on all platforms, including iOS.
How?
Despite initial thoughts, I don't believe this issue is related to the screen safe-area, which appears to be properly handled natively by the
ion-headercomponent. I believe that the cause of the issue is iOS's enthusiastic momentum-based scrolling. This results in glitches when a scrollableion-contentblocks resizes whilst its content is being scrolled.One thing to try: make the condensed header fixed position so it floats above content and adding padding (safe-area + header height) to content. This should allow the
ion-contentelement to remain the same size throughout. However there may be some issues relating to ionic's default header behaviour.fullscreen property
One possible solution that I explored was using
fullscreenproperty onion-content. This should allow the scroll area to extend to the very edges of the screen, and therefore not be altered when the header is collapsed. However this property has no effect in our case, I think because of our set up of the template'sion-contentbeing nested inside a few other elements within the page, rather than appearing directly below the header component. We can replicate the behaviour of setting[fullscreen]="true"by setting--offset-topto the height of our header (including the safe-area offset) on theion-contentcomponent. This effectively adds padding to the top of the innerinner-scrollelement inside theion-contentelement. However, the scrolling glitch persists in this case. I think the only way to get this method to work would be to have the value ofinner-scrollchange dynamically when the header collapse is animating, to consistently reflect the visible height of the header component throughout.https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/f14a829f-c926-4d5f-8441-9e4adc734eec
ion-header options
There are additional options for customising the ion-header component on iOS compared to other platforms, e.g. condensed and fade. However none of these corresponds to our collapsing header functionality, and none gives more screen real estate to content, which was the main motivation for the collapsing header functionality. They are also not trivial to implement with our current header/content element configuration.