iOS Tab "loses" position when app become active again

Bắt đầu bằng cách tái hiện vấn đề với một ứng dụng tab iOS mới, thực hiện các bước nền và tiền cảnh được liệt kê trên trình mô phỏng hoặc thiết bị. Kiểm tra việc xử lý thao tác chạm của tabbar và toolbar-inner; công việc hoàn tất khi tab được chọn và bong bóng vẫn thẳng hàng sau khi mở lại ứng dụng.

• 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.