bug: iOS - Tap on status bar doesn’t scroll to top

[socialmedialabs]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

When tapping the status bar in Safari on iOS or iPadOS (nor Simulator) the content would not scroll to the top. Nothing happens at all.

Tested on iOS/iPadOS 17.4.1

Expected Behavior

Tapping on the status bar of an Apple mobile device should always scroll the content of a page to the top.

Steps to Reproduce

1. With an Apple mobile device go to either of the following urls https://ionicframework.com/docs/usage/v8/infinite-scroll/basic/demo.html https://ionicframework.com/docs/usage/v8/header/translucent/demo.html
2. Scroll to the bottom of each page
3. Tap the status bar (nothing happens)

Code Reproduction URL

https://ionicframework.com/docs/usage/v8/infinite-scroll/basic/demo.html

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/home/ubuntu/.nvm/versions/node/v21.6.1/lib/node_modules/ionic)

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/core : 6.0.0

Utility:

cordova-res : not installed native-run : 2.0.1

System:

NodeJS : v21.6.1 (/home/ubuntu/.nvm/versions/node/v21.6.1/bin/node) npm : 10.2.4 OS : Linux 6.5

Additional Information

I am using Ionic Vue No response

[DwieDima]

@socialmedialabs did you apply statusTap: true for your config?

import { IonicVue } from '@ionic/vue';
import { createApp } from 'vue';

createApp(App).use(IonicVue, {
  statusTap: true
});

statusTap is default true when ionic runs in a mobile device

https://ionicframework.com/docs/developing/config

[socialmedialabs]

That's exactly what I have:

const getConfig = () => {
  return {
    // mode: 'ios'
    hardwareBackButton: false,
    innerHTMLTemplatesEnabled: true,
    statusTap: true,
    swipeBackEnabled: false,
  }
}

and then

const app = createApp(App)
  .use(pinia)
  .use(IonicVue, getConfig())
  .use(router)

I have a corresponding forum entry here: https://forum.ionicframework.com/t/ios-tap-on-status-bar-doesnt-scroll-to-top/241105 (the swipeBackEnabled option has no effect either, btw)

[liamdebeasi]

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.