[内容]
popover在页面有横向滚动后,在android的微信浏览器上弹出位置不对,好像没把滚动条的位置加上,ios微信没问题。
附件为我保存的html的公众号源码,可以测试,到时会有个公众号地址,只要能在android手机上弹出位置正确就行。
现在是chrome显示正确,safari显示也不对,ios版微信显示正确,但android版微信显示不正确。
测试html下载
重现步骤
使用类似这样的代码:
mui('#savePopover').popover('toggle',e);
<div id="savePopover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-media-body" style="padding:0px 16px;">
<div id="selecteddiv" style="text-align:left;"></div>
</div>
</div>
</div>
.mui-popover {
height: 200px;
}
联系方式
[QQ]27331849
客户端环境: ios11,微信公众号
1、我用mac上的chrome来浏览这个页面,进行横向滚动和缩放方式,则popover弹出位置是正确的。
代码类似:
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
.....
</div>
</div>
2、但我用Safari来浏览这个页面,也是进行横向滚动,则popover弹出位置不准确
我是用Safari的开发工具中的响应设计模式和模拟用ios11的浏览器来在Safari中测试的。
应该是mui这块代码没兼容iphone。
查到有段代码
window.innerWidth
在safari中的值是373
但在chrome中的值是2500
因为这个值的不同,引发bug.
mui需要对不同的浏览器兼容下
window.innerWidth和widow.innerHeight
我的页面开启了 viewport,user-scalable=yes
5 个回复
深海智行 - 专注前端培训
实在不行的话,就找我:2579915825
j***@163.com (作者)
愿意帮忙的请联系我的qq 27331849
如果已经解决,我也会在这里说明的。
风大大
时隔将近一年,解决了吗
深海智行
解决了,因为找了我
2019-11-26 14:49
d***@sina.com
fcv
回梦無痕 - 暂停服务
这种问题之前也遇到过,做电影院选座的,处理有点复杂。
大概在mui.js的5918行开始,这里就是这个定位的代码,因为这个座位容器可以放大缩小,情况很多种,当时愣是没有做好。。。
最后换了别的方法,没有做这样的吸附tis了。