iOS - Tap on status bar doesn't scroll to top

Ionic Framework Ionic Vue
1

I am using Ionic 8 and Capacitor 6.
My (still PWA but soon to be) app is set up based on ion-tabs with list items in each tab view.
When scrolling any of those lists and tapping on the status bar my expected behaviour would be the list to scroll to the top. However, when tapping the status bar neither in Safari nor installed as PWA (still Webkit) would scroll to the top. Nothing happens at all.

What I have tried:

  • Added statusBar: false option to IonicVue config - unfortunately just like swipeBackEnabled: false none of these have any effect.

  • Added Capacitor StatusBar, Style plugins and added event listener statusTap. This didn’t work either.

I don’t know if the above settings are supposed to work when the vue app is deployed as ios app. Howewer, something seems to prevent tapping of the status bar to be fired.

If you need sample code, I’ll be happy to provide it, however - as I mentioned - it’s pretty much the ion-tabs code sample with list items in each tab view.

I have tried on an iPhone XS, an iPad Pro (Gen. 1) both with iOS 17.4.1 and on Simulator app iPhone 15 Pro Max also on iOS 17.4.1.

Edit: I just tried it on two of the examples from docs and tapping the status bar there wouldn’t do anything as well (opened the iframe urls directly):
https://ionicframework.com/docs/usage/v8/infinite-scroll/basic/demo.html
https://ionicframework.com/docs/usage/v8/header/translucent/demo.html

2

Ok, since no one seems to have any answer to this, I guess I’ll go and file an issue on Github?

Looking forward to any input.

3

If anyone else is coming here, here is Liam’s response from the issue created - bug: iOS - Tap on status bar doesn’t scroll to top · Issue #29376 · ionic-team/ionic-framework · GitHub

This is to be expected in a web browser. The status bar tap enabled by statusTap: true relies on the Capacitor status bar plugin which only functions in a Capacitor application.

In a web browser, iOS handles the status bar scroll to top when scrolling on the body element. Since your Ionic app scrolls on the ion-content element and not body, tapping the status bar will not scroll the ion-content to the top. iOS does not expose any additional APIs for us to control this unfortunately.