Skip to content

iOS Tab "loses" is position when app become active again #4357

@mayconedinger

Description

@mayconedinger
  • 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):

Gravacao.de.Tela.2025-12-23.as.11.23.40.mov

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

Gravacao.de.Tela.2025-12-23.as.11.23.40.mov

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.

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions