<Tabs /> bug in ios11

[NatPagle]

Version

2.1.6

Environment

ios11

Reproduction link

http://wap.dianping.lubanfenqi.com/news/list

Steps to reproduce

请使用ios11版本的任意型号iphone点击重现链接

What is expected?

展示相关Tabs

What is actually happening?

无法显示Tabs，必须点击一次空白处，才能够显示Tabs。

---

相关的js代码如下，该问题在其他非ios11跟安卓下均无法重现，请问是否是ios11下的兼容问题。谢谢。

<Tabs tabs={data}
	initialPage={0}
	swipeable={false}
	onChange={(tab, index) => this.handleChangeTab(tab, index) }
	onTabClick={(tab, index) => this.handleChangeTab(tab, index) }
>
{/***/}
</Tabs>

[paranoidjk]

测试 ios11 safari 下有问题，支付宝打开正常。

[fadeojo]

hi @zhang740, any word on this bug?

[ziluo]

@NatPagle @fadeojo 现在还可以复现吗，我本地看了ios 11.3的Safari浏览器，没有复现该问题

[NatPagle]

@ziluo Hi，已经fixed了。项目更新后已经完全正常，非常感谢你们的辛勤工作。

[maroon1]

并没有修复啊，https://antd-mobile-tabs-bug.stackblitz.io/

[NatPagle]

@maroon1 没有？我一模一样的代码，还是那部手机，已经好的莫名其妙😂

[ziluo]

@maroon1 看你的Demo是有问题的，但感觉和下面的Tab切换动作有关系，能否把你的Demo源码链接贴一下，我本地Debug下

[maroon1]

@ziluo https://stackblitz.com/edit/antd-mobile-tabs-bug

[ziluo]

@maroon1 这个问题应该是在iOS 11.3的Safari里面未触发重绘造成的，在网上搜到 https://discuss.reactjs.org/t/repaint-bug-markup-exists-but-not-being-shown/558
和这个问题非常类似，试了下里面的方法可以解决问题，详见：https://stackblitz.com/edit/antd-mobile-tabs-bug-v9xgo2

目前还没发现更好的解决方案，如果业务上紧急可以先这样解决；后续如有新的进展，欢迎继续沟通

[maroon1]

不知道 TabBar 或者 Tabs 组件是否对子组件进行缓存。由于我手上的这个项目有使用前端路由，所以干脆设置 noRenderContent ，然后由路由组件来管理相应的 Tab 内容（也可以通过其他方式手动控制），可以规避掉这个 Bug。