昨天做项目的时候,遇到了一个奇怪的问题。
问题仅在安卓手机端自带浏览器出现。 用chrome 自适应调试 模拟安卓浏览器时无法重现问题。
安卓手机下用chrome 联机调试又没有问题,仅在安卓自带浏览器内核的情况下才能重现该BUG
这对我的调试十分的不方便。
这个BUG是这样的:
在父类的prosition:absolute / relative 的时候 父类上如果有overflow属性,overflow属性会失效。
比如
section{
position: relative;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
}
section > div {
position:absolute;
left:100%;
top: 0;
}
这里的section下的div 在安卓自带浏览器下,还是会溢出,
并且导致页面可以左右滑动。
那么解决办法就是 将 overflow属性 写到div上。
最终解决的代码:
section{
position: relative;
width: 100%;
height: 100%;
}
section > div{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 100%;
overflow-y: scroll;
}
这个BUG 挺诡异,特此备案,用以警示。