iOS 17promax真机上底部tabbar出现了脱离底部显示的uni-app问题

iOS 17promax真机上底部tabbar出现了脱离底部显示的uni-app问题

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

操作步骤：

"tabBar": {  
    "custom": false,  
    "color": "#767C8F",  
    "selectedColor": "#85bd00",  
    "borderStyle": "black",  
    "backgroundColor": "#333",  
    "list": [{  
            "pagePath": "pages/index/index",  
            "iconPath": "static/images/tabbar/home.png",  
            "selectedIconPath": "static/images/tabbar/home1.png",  
            "text": "首页"  
        },  
        {  
            "pagePath": "pages/index/trade",  
            "iconPath": "static/images/tabbar/spots.png",  
            "selectedIconPath": "static/images/tabbar/spots1.png",  
            "text": "现货"  
        },  
        {  
            "pagePath": "pages/index/contract",  
            "iconPath": "static/images/tabbar/contract.png",  
            "selectedIconPath": "static/images/tabbar/contract1.png",  
            "text": "合约"  
        },  
        {  
            "pagePath": "pages/index/mine",  
            "iconPath": "static/images/tabbar/mine.png",  
            "selectedIconPath": "static/images/tabbar/mine1.png",  
            "text": "我的"  
        }  
    ]  
}

预期结果：

需修复

实际结果：

需修复

bug描述：

iOS 17promax在浏览器中H5，底部tabbar出现了移位，跟随页面滑动离开了底部，停留在了页面上且无法回位到底部

image


更多关于iOS 17promax真机上底部tabbar出现了脱离底部显示的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

感谢你的持续跟进。目前进度：看起来这是 safari 的 bug，并没有正确处理这部分逻辑。 关联： https://developer.apple.com/forums/thread/800125?answerId=857951022#857951022

看配置没问题。你这个截图怎么看，请提供完整视频。并尝试用 chrome、safari 调试一下具体问题。并测试其他机型、其他 ios 版本是否正常。

更多关于iOS 17promax真机上底部tabbar出现了脱离底部显示的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


目前猜测输入框聚集后页面上抬，回不到底部，其他ios没发现这个问题，目前只有苹果17promax出现了这个问题

回复 1***@qq.com: 如 IM 群沟通，请你测试缓慢滚动是否正常。自己编写空白的非 uniapp 项目是否正常。web 端调试非常容易，你可以使用 chrome/safari 调试 css 。如果之后最新新版的 iPhone 有 bug ，可能是苹果的 bug

这是一个典型的 iOS 安全区域适配问题。在 iPhone 14 Pro Max 及更新机型上，由于底部存在动态岛和新的安全区域布局，tabBar 需要额外处理才能正确固定在底部。

解决方案：

  1. 开启自定义 tabBar（推荐） 将 "custom": true，然后使用 uni.getWindowInfo() 获取安全区域信息，手动计算 tabBar 位置。

  2. 使用 CSS 适配安全区域 在 App.vue 的全局样式中添加：

    /* 适配iOS底部安全区域 */
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

  3. 检查页面结构 确保页面使用 100vh 高度时包含安全区域计算：

    page {
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
回到顶部