木乃森
木乃森
  • 发布:2015-06-24 18:42
  • 更新:2016-08-18 17:14
  • 阅读:6991

【报Bug】在输入框失去焦点,关闭页面软键盘的时候,页面错位。

分类:HTML5+

测试了MUI的官方APP也是会有这样的BUG。好像这个BUG存在了很长时间了,一直没有办法解决。

附件第一个图是正常的,第二个图是页面错位的。

而且错位的时候,只是页面显示下移了,但是控件还是会在原来位置。比如说,错位的图这个textare已经在页面底部了,其实你点击页面的中部偏底部,才是实际位置。

还有就是,不单单Android系统上面会出现,IOS系统上面也会出现这种问题。希望能得到重视,或者有谁有解决办法

BUG重现方法,点击输入框的时候,手指上移页面,再让输入框失去焦点,就会有几率出现页面整体错误的现象。出现的几率比较大。

测试机器:小米note,iPhone 5s;

发现三星的NOT3不会出现这种问题,感觉跟webview关闭软键盘的时候的resize机制有关。

PS:跟页面内容fixed定位无关,在项目中删除fixed定位部分代码,同样会重现问题。

2015-06-24 18:42 负责人:无 分享
已邀请:
木乃森

木乃森 (作者)

木有人有解决办法么。。。。

Tendernesz

Tendernesz

同样遇到问题,希望官方帮忙解决一下

  • 木乃森 (作者)

    目前解决的办法是,头部用absolute定位。中间区域用isscroll解决的

    2015-07-16 19:11

云钦

云钦 - 学习中

没遇到过

chender

chender - 与人为善

+1
  • apche

    +1

    2015-11-24 10:29

gjh

gjh

bug只要你触发软键盘,然后页面拉到最下面,然后拉回头部再拉到最下面,就能触发这bug,但是要原页面是没滚动条即无软键盘时页面内容没超出页面。

mui求解答

huyong1978

huyong1978

同问

kele

kele

ios没遇到过,android很经常,附android解决办法:
1.解决办法(具体的高度参照http://ask.dcloud.net.cn/article/205这篇文章也有些错误,自己打出来验证一下哦)
function fixheight(){
setTimeout(function(){
document.body.style.marginTop =(plus.android.invoke(plus.android.currentWebview(),'getHeight') - screen.height + plus.navigator.getStatusbarHeight()*plus.screen.scale)/2/plus.screen.scale + 'px';
},10);
}
2.监听方法
<body onresize="fixheight()">你的html</body>

fanfanIcy

fanfanIcy

最近红米等多款安卓机子上遇到这个问题,都是在webview里出现,尝试用楼上的办法不行,红米中收起软键盘的时候没有触发onresize事件_(:зゝ∠)_。  
后来经过调试发现,页面如果纵向有scrollbar,出现和收起软键盘就不会出现这个问题,所以很猥琐地把页面都撑高了- -
  • gjh

    我直接在body100%再加 上边距1px(≖ ‿ ≖)✧

    2016-04-27 15:34

  • 天才书生

    回复 gjh:具体怎么加呢?body style="height:100%:margin-top:1px"这样子吗,我试了不行啊

    2016-08-18 16:32

  • Native_O

    情况不一样,我的也不起作用的

    2018-01-25 20:45

天才书生

天才书生

感谢8楼第一回复的那位兄弟,虽然还没回答,但我已经试出来了

我来消灭BUG一下,用CSS解决,在会错位的文件中加入,希望更多人知道

html,
body {
height: 100%;
margin: 1px 0 0 0;
}

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