-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Description
- 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.
