chrismclarke
commented
3 months ago What do you mean by glitch? Not sure how what is displayed is different to what would be expected. From the videos it looks as if the header is both appearing and disappearing mostly as expected (just with a bit of a delay while the screen scroll effect keeps moving).
The main different I can see compared to android implementation is that on android we are in a full screen view where status bar is fully hidden, so we don't have content overlapping the clock/notch areas, but not sure if I'm missing something somewhere else?
If the issue is just the overlap have you checked testing with safe area padding configs? Looks similar to issue mentioned in: https://forum.ionicframework.com/t/capacitor-ios-status-bar-overflow-app/237604/4
There also may be configuration to manage for the Status Bar API, e.g. setting UIStatusBarHidden or other style configuration:
https://capacitorjs.com/docs/apis/status-bar#ios-note
Describe the bug The header collapse (introduced in #2216) causes a scrolling glitch when running on iOS: when the content is scrolling and the header collapses or expands, the scrolling content quickly accelerates in the direction of scroll, causing the page to jump around erratically.
App version 0.16.26
Steps to replicate Use this build on appetize. Navigate to a template that has enough content to allow for substantial scrolling, e.g.
comp_button. Try scrolling up and down the page. When running natively in emulation, this effect is very pronounced when comparing to running on Android – due to the slight lag present when using appetize, the effect may appear less pronounced but is definitely still perceptible.Screenshots and videos On an emulated device with a display cutout:
https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/087eb02d-da49-495f-a966-7d6816b5a4e9
On an emulated device without a display cutout:
https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/9d6d1d04-c804-4325-bc52-abf8a26c4cd9
Additional context It would be sensible to look into the iOS-specific options available for the ion-header component, as it is likely these could be used in place of our custom header collapse logic on iOS.