j***@163.com
j***@163.com
  • 发布:2018-10-13 11:59
  • 更新:2018-11-28 15:10
  • 阅读:1986

【报Bug】popover在页面有横向滚动条时显示位置不准确,没把横向滚动位置加上。

分类:MUI

[内容]
popover在页面有横向滚动条时显示位置不准确,没把横向滚动位置加上,导致popover内容会超出现有屏幕。
重现步骤
使用类似这样的代码:

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

2018-10-13 11:59 负责人:无 分享
已邀请:
j***@163.com

j***@163.com (作者)

客户端环境: ios11,微信公众号
1、我用mac上的chrome来浏览这个页面,进行横向滚动和缩放方式,则popover弹出位置是正确的。
代码类似:
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
.....
</div>
</div>
2、但我用Safari来浏览这个页面,也是进行横向滚动,则popover弹出位置不准确
我是用Safari的开发工具中的响应设计模式和模拟用ios11的浏览器来在Safari中测试的。

应该是mui这块代码没兼容iphone。

j***@163.com

j***@163.com (作者)

查到有段代码
window.innerWidth
在safari中的值是373
但在chrome中的值是2500
因为这个值的不同,引发bug.
mui需要对不同的浏览器兼容下
window.innerWidth和widow.innerHeight
我的页面开启了 viewport,user-scalable=yes

j***@163.com

j***@163.com (作者)

管理员怎么不回复呢,bug明显啊

风大大

风大大

把mui-popover代码放到有position定位的父容器外,这样mui-popover就不会继承父容器的定位而被影响。(实践)
<div class="parentContainer">

</div>
<div class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"></li>
<li class="mui-table-view-cell"></li>
</ul>
</div>

该问题目前已经被锁定, 无法添加新回复