iOS Tab "loses" position when app become active again

まず、新しい iOS タブアプリで、シミュレータまたはデバイス上で記載されているバックグラウンドとフォアグラウンドの手順に従って問題を再現します。tabbar と toolbar-inner のタッチ処理を調査します。アプリを再度開いた後も選択されたタブとバブルの位置が揃ったままになれば、作業は完了です。

• Framework7 version: 9.0.2
• Platform and Target: iOS (both in cordova as in capacitor)

Describe the bug

When an app became active after I go to the iphone homescreen, the tabbar gets "lost" and the "bubble" stays in a random place. And it seems the active page is not the one showing on the screen.

I tried it in both an existing app migrating from v8.x and algo a complete new black app (from CLI).
I'll provide two videos from both apps to help.

It "seems" that the tabbar "watches" my finger touch or mouse touch when a touch/click above the actual tabbar, moving the "bubble" to the last touched place when exit the app (you can see that watching the mouse on the recording)

To Reproduce

Steps to reproduce the behavior:

• Create a new app "tab" (iOS), add the platform, build and run (can be on the simulator as on a real device).
• Choose some other tab than "home"
• Exit the app (go to iphone home screen) very slowly (so you can see the "bubble" assuming your touched place of the screen
• Reopen the app
• See the "bubble tab" position

Expected behavior

A clear and concise description of what you expected to happen.

Actual Behavior

Explain what is actually happening

Screenshots

Behavior on an already existing app (migrated from v8.x):

https://github.com/user-attachments/assets/d0efa106-d45d-412a-9a77-f71f795643b2

Same behavion on a "blank" new app (form CLI):

https://github.com/user-attachments/assets/9d7a0159-31d8-4e09-80b6-65bcdd4f30ca

Here is my code:

<div class="views tabs safe-areas">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar tabbar toolbar-bottom tabbar-icons">
    <div class="toolbar-inner">
      <div class="toolbar-pane">
        <a href="#view-home" class="tab-link tab-link-active">
          <i class="icon f7-icons if-not-md">house_fill</i>
          <i class="icon material-icons if-md">home</i>
          <span class="tabbar-label">Home</span>
        </a>
        <a href="#view-catalog" class="tab-link">
          <i class="icon f7-icons if-not-md">square_list_fill</i>
          <i class="icon material-icons if-md">view_list</i>
          <span class="tabbar-label">Catalog</span>
        </a>
        <a href="#view-settings" class="tab-link">
          <i class="icon f7-icons if-not-md">gear</i>
          <i class="icon material-icons if-md">settings</i>
          <span class="tabbar-label">Settings</span>
        </a>
      </div>
    </div>
  </div>

Aditional comment

Watching the component via web inspct it seems thar the touch of the tabbar is looking for the entire height of the "toolbar-inner" element.