最外层的容器使用flex布局在safari浏览器中滚动时无法隐藏底部、顶部操作栏

[SyMind]

相关平台

H5

复现仓库

浏览器版本: mobile safari or chrome
使用框架: React

复现步骤

构建一个足够长可以滚动的页面，存在以下一个问题：

1. 外层容器使用 flex 布局会产生一些bug：如滚动过程中误触到底部 TabBar 会导致 flex 盒子整体移动，内部使用 fixed 布局时快速滚动时可能发生抖动（貌似时导致了 fixed 块 reflow，该元素框内部结构复杂时会有明显闪动）；
2. 外层容器使用 flex 布局，导致滚动元素不是 body，导致 safari、chrome 等滚动时隐藏底部、顶部操作栏的机制无法触发。

期望结果

最外层容器不应该使用 flex 布局。
现有的技术：https://hellouniapp.dcloud.net.cn/

实际结果

最外层不使用 flex 布局，模拟小程序的 tabbar 使用 fixed 布局。

环境信息

Taro CLI 3.0.18 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.21.1 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD

---

补充信息

[lisgking]

rn的flex也失效了，
https://snack.expo.io/ 这个例子还taro的里跑，就没有全屏效果了，有解决方案吗？

[ZakaryCode]

提供示例未能复现该问题