Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

iOS Tab "loses" position when app become active again

未关闭
  • 哪里不对？
#4,357 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
45/100
Issue 类型
缺陷
描述清晰度
需要澄清
活跃度
冷清
技术栈
ios, javascript
领域
mobile

调研方向

首先，在新的 iOS 标签页应用中重现该问题，按照列出的后台和前台步骤在模拟器或设备上操作。检查 tabbar 和 toolbar-inner 的触摸处理；重新打开应用后，选中的标签页和气泡仍保持对齐时，工作即完成。

由索引模型根据 Issue 内容生成。

描述

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

Image
主要语言
JavaScript
星标
18.8k
派生
3.2k
30 天内没有已合并 PR

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

framework7io/framework7 的其他 Issue

查看 framework7io/framework7 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。