现象:ipad ios15 safari浏览器上,当页面滚动后,地址栏会自动隐藏,这时点击按钮显示一个模态框,模态框中的按钮点了后无响应
原因:ios15 safari新加功能页面滚动时自动隐藏地址栏,当页面滚动后,模态框使用了position: fixed; 进行定位,这时候地址栏又显示出来了,但此时的html大小是整体往上移了,也就是说被隐藏的地址栏使得模态框的最前面部分的区域整体高度变得向上移动,而与真实的模态框中的内容有一定距离,当我们点击模态框中的按钮或输入框后,表现就是没有反应。如果在按钮的位置向上一小段距离(大概是地址栏高度)的样子点击,就会触发按钮事件了。
对应方案:当模态框打开后,让它再次计算一次html的大小。就执行下面这段代码就可以,目的就是让页面再次计算一次大小,这时候就会按照最新的页面布局计算一次,让元素位置"归位"。
this.document.documentElement.scrollTop = this.document.documentElement.scrollTop;